---
// TableOfContents.astro
import TableOfContentsHeading from "./TableOfContentsHeading.astro";
import TocItem from '../utils/generateToc.ts';
const { headings } = Astro.props;

const toc = headings && headings.length ? TocItem(headings) : [];

console.log(toc);

---

<nav class="toc">
    <h2 id="on-this-page">On this page</h2>
    <ul>
        {toc.map((heading) => <TableOfContentsHeading heading={heading}/>)}
    </ul>
</nav>
<style>
    .toc ul {
        list-style: none;
        padding-inline-start: 0;
        border-left: 1px solid var(--secondary-background);
    }
</style>