---
import type { MarkdownHeading } from 'astro'
import { generateToc } from '@/utils'

import TOCHeading from './TOCHeading.astro'

interface Props {
	headings: MarkdownHeading[]
}

const { headings } = Astro.props

const toc = generateToc(headings)
---

<aside
	class='sticky top-20 order-2 -me-28 hidden h-[calc(100vh-6rem)] basis-60 lg:flex lg:flex-col'
>
	{
		toc.length > 0 && (
			<>
				<h2 class='mb-4 font-semibold'>TABLE OF CONTENTS</h2>
				<ul class='max-h-[calc(100vh-10rem)] overflow-y-auto pr-4 text-card-foreground'>
					{toc.map((heading) => (
						<TOCHeading heading={heading} />
					))}
				</ul>
			</>
		)
	}
</aside>
