---
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="text-card-foreground max-h-[calc(100vh-10rem)] overflow-y-auto pr-4">
					{toc.map((heading) => (
						<TOCHeading heading={heading} />
					))}
				</ul>
			</>
		)
	}
</aside>