---
import type { HeadingHierarchy } from "@/types/index";
import type { MarkdownHeading } from "astro";
import { createHeadingHierarchy } from "@lib/tocUtils";
import { ScrollArea } from "@components/common/shortcodes/ScrollArea";

interface Props {
  headings: MarkdownHeading[];
  tocDepth?: number;
}

const { headings, tocDepth = 3 } = Astro.props;
const heirarchy: HeadingHierarchy[] = createHeadingHierarchy(headings);
const toc = heirarchy.filter((heading) => heading.depth <= tocDepth);
---

{
  toc.length > 0 && (
    <div class="relative glass rounded-lg p-4 my-2 w-full intersect:animate-fadeLeft opacity-0">
      <ScrollArea className="h-full" client:only="react">
        <h2 class="text-2xl border-none">Contents</h2>
        <ul class="list-none m-0">
          {toc.map((heading) => (
            <li class=`${heading.depth === 2 ? "ml-0" : "ml-4"}`>
              <a href={`#${heading.slug}`} class=" w-full leading-none no-underline">
                {heading.text}
              </a>
            </li>
          ))}
        </ul>
      </ScrollArea>
    </div>
  )
}
