import type { Heading } from "@/lib/blog/markdown";
import { TocSpy } from "./toc-spy";

/** Built from the same parsed headings that give the body its anchors, so they cannot drift. */
export function TableOfContents({ headings }: { headings: Heading[] }) {
  return (
    <nav aria-label="Table of contents" data-toc>
      <h2 className="text-blog-muted text-xs font-bold tracking-wider uppercase">
        On this page
      </h2>
      <ol className="border-blog-line mt-3 space-y-1 border-l text-sm">
        {headings.map((h) => (
          <li key={h.id}>
            <a
              href={`#${h.id}`}
              className="text-blog-muted hover:text-blog-ink data-[active=true]:border-blog-accent data-[active=true]:text-blog-ink -ml-px block border-l-2 border-transparent py-1 pl-3 data-[active=true]:font-semibold"
            >
              {h.text}
            </a>
          </li>
        ))}
      </ol>
      <TocSpy ids={headings.map((h) => h.id)} />
    </nav>
  );
}