Table of Contents

"use client";

import * as React from "react";

import { TableOfContents, type TocItem } from "@/components/ui/toc";

const sections: { id: string; title: string; body: string }[] = [
  {
    id: "getting-started",
    title: "Getting started",
    body: "Scroll through the article on the left and watch the marker on the right slide to the section that is currently in view.",
  },
  {
    id: "installation",
    title: "Installation",
    body: "Drop the component into your project and pass it a flat or nested list of headings. Clicking a link smooth-scrolls to the matching section and respects reduced-motion.",
  },
  {
    id: "usage",
    title: "Usage",
    body: "Give each section an id that matches an item in the list. The active heading is tracked automatically as you scroll the page.",
  },
  {
    id: "configuration",
    title: "Configuration",
    body: "Compose from parts or feed it items directly. Provide your own label, or control the active id yourself for full flexibility.",
  },
  {
    id: "accessibility",
    title: "Accessibility",
    body: "The navigation is rendered as a nav landmark and the active link is marked with aria-current for assistive technology.",
  },
  {
    id: "faq",
    title: "FAQ",
    body: "Nested headings, right-to-left layouts and long documents are all handled out of the box.",
  },
];

const items: TocItem[] = sections.map((section) => ({
  id: section.id,
  text: section.title,
  level: 2,
}));

export default function TableOfContentsDemo() {
  return (
    <div className="mx-auto flex w-full max-w-3xl gap-10 bg-background px-6 py-10 text-foreground">
      <article className="min-w-0 flex-1 space-y-10">
        {sections.map((section) => (
          <section
            key={section.id}
            id={section.id}
            className="scroll-mt-16 space-y-3"
          >
            <h2 className="text-lg font-semibold tracking-tight">
              {section.title}
            </h2>
            <p className="text-sm leading-relaxed text-muted-foreground">
              {section.body}
            </p>
          </section>
        ))}
      </article>

      <aside className="sticky top-16 hidden h-fit w-48 shrink-0 md:block">
        <TableOfContents items={items} />
      </aside>
    </div>
  );
}