---
import TableOfContentsHeading from './TableOfContentsHeading.astro'

// https://kld.dev/building-table-of-contents/
const { headings } = Astro.props
const toc = buildToc(headings)

export interface Heading {
  depth: number
  slug: string
  text: string
}

function buildToc(headings: Heading[]) {
  const toc: Heading[] = []
  const parentHeadings = new Map()
  headings.forEach((h) => {
    const heading = { ...h, subheadings: [] }
    parentHeadings.set(heading.depth, heading)
    if (heading.depth === 2) {
      toc.push(heading)
    } else {
      parentHeadings.get(heading.depth - 1).subheadings.push(heading)
    }
  })
  return toc
}
---

<details open class="block xl:hidden rounded-lg border p-3 mb-8">
  <summary class="text-xl font-semibold">Table of Contents</summary>
  <nav>
    <ul class="py-3">
      {toc.map((heading) => <TableOfContentsHeading heading={heading} />)}
    </ul>
  </nav>
</details>
<nav class="sticky top-16 hidden xl:block h-0 w-[calc(50vw-50%-4rem)] overflow-wrap-break-word text-xs leading-4 translate-x-[calc(-100%-2em)]">
  <h2 class="text-xl font-semibold mb-4">Table of Contents</h2>
  <ul class="space-y-2">
    {toc.map((heading) => <TableOfContentsHeading heading={heading} />)}
  </ul>
</nav>
