Doc

import { Footer } from "@/registry/components/footer"
import { Header } from "@/registry/components/header"
import { DocBreadcrumb } from "./components/doc-breadcrumb"
import { DocPagination } from "./components/doc-pagination"
import { DocSidebarLayout } from "./components/doc-sidebar"
import { DocToc } from "./components/doc-toc"

const demoHeader = {
  title: "XACLABS.DEV",
  description: "Open Source Organization",
  menus: [
    { title: "Blocks", href: "/blocks" },
    { title: "Components", href: "/docs" },
    { title: "Blog", href: "/articles" },
  ],
}

const demoFooter = {
  title: "XaC Labs UI",
  description: "A modern, open source component library.",
  copyright: "XaC Labs",
  menus: [
    {
      title: "Documentation",
      children: [
        { title: "Introduction", href: "/docs" },
        { title: "Components", href: "/docs/components/header" },
      ],
    },
  ],
}

const demoSidebar = [
  {
    title: "Getting Started",
    items: [
      { title: "Introduction", href: "/docs/introduction" },
      { title: "Installation", href: "/docs/installation" },
    ],
  },
  {
    title: "Components",
    items: [
      { title: "Button", href: "/docs/components/button" },
      { title: "Card", href: "/docs/components/card" },
    ],
  },
]

const demoHeadings = [
  { depth: 2, slug: "overview", text: "Overview" },
  { depth: 2, slug: "installation", text: "Installation" },
  { depth: 3, slug: "prerequisites", text: "Prerequisites" },
  { depth: 2, slug: "usage", text: "Usage" },
]

const currentPath = "/docs/introduction"

export default function DocBlockPage() {
  return (
    <>
      <Header header={demoHeader} />
      <DocSidebarLayout config={demoSidebar} currentPath={currentPath}>
        <div className="flex flex-1 w-full gap-6">
          <div className="flex-1 min-w-0 mx-auto max-w-5xl px-6 md:px-8 pb-20 pt-6">
            <DocBreadcrumb currentPath={currentPath} />
            <div className="mt-6">
              <h1>Introduction</h1>
              <p>
                Welcome to the documentation. This is a demo of the doc block
                components.
              </p>
              <h2 id="overview">Overview</h2>
              <p>
                This block includes a sidebar, breadcrumb navigation, table of
                contents, and pagination.
              </p>
              <h2 id="installation">Installation</h2>
              <h3 id="prerequisites">Prerequisites</h3>
              <p>You need Node.js 18+ and pnpm installed.</p>
              <h2 id="usage">Usage</h2>
              <p>
                Import the components from the registry and compose them in your
                layout.
              </p>
            </div>
            <DocPagination currentPath={currentPath} config={demoSidebar} />
          </div>
          <aside className="hidden xl:block w-56 shrink-0 pt-6 pr-6">
            <DocToc headings={demoHeadings} />
          </aside>
        </div>
      </DocSidebarLayout>
      <Footer footer={demoFooter} />
    </>
  )
}