"use client"

import * as React from "react"

import type { ComponentDocSpec } from "@/lib/design-system/component-doc-types"
import { BreadcrumbPreview } from "@/components/design-system/navigation-previews"

export const breadcrumbComponentDoc: ComponentDocSpec = {
  slug: "breadcrumb",
  summary: "Ancestor trail paired with SiteHeader — one H1 on the page, breadcrumbs are wayfinding only.",
  sections: [
    {
      id: "default",
      title: "Default",
      children: <BreadcrumbPreview />,
      description: "Current page uses BreadcrumbPage; ancestors are links.",
    },
  ],
  guidelines: {
    do: [
      "Compose via SiteHeader + PageBreadcrumbTrail.",
      "Let the trail decide: it shows every segment that fits and moves the middle ones into More (BreadcrumbEllipsis + dropdown) only when the row runs out of room.",
    ],
    dont: [
      "Do not add a Back button when breadcrumbs exist (P1).",
      "Do not use breadcrumb as the only page title.",
      "Do not hide segments by crumb count or at a breakpoint. A trail that fits shows all of it.",
    ],
  },
  relatedSlugs: ["site-header", "page-header"],
}