import { Breadcrumb, Code } from "../../../dist/index.js";
import DocsLayout from "../DocsLayout.jsx";
import { PropTable } from "./shared.jsx";

const usageSnippet = `<Breadcrumb
  items={[
    { label: "Home", href: "/" },
    { label: "Products", href: "/products" },
    { label: "Laptops", href: "/products/laptops" },
    { label: "MacBook Pro" },
  ]}
/>`;

const docsItems = [
	{ label: "Home", href: "/" },
	{ label: "Docs", href: "/docs" },
	{ label: "Components", href: "/docs/components" },
	{ label: "Breadcrumb" },
];

const settingsItems = [
	{ label: "Home", href: "/" },
	{ label: "Settings", href: "/settings" },
	{ label: "Privacy" },
];

export default function BreadcrumbPage({ currentPath }) {
	return (
		<DocsLayout currentPath={currentPath}>
			<div className="docs-content">
				<h1>Breadcrumb</h1>
				<p>
					A navigation trail showing the user's location within a hierarchy.
					Follows the WAI-ARIA Breadcrumb pattern — wrapped in a{" "}
					<code>&lt;nav&gt;</code>, rendered as an <code>&lt;ol&gt;</code>, and
					the current page marked with <code>aria-current="page"</code>.
					Separators are hidden from screen readers via <code>aria-hidden</code>
					.
				</p>

				<h2>Import</h2>
				<Code
					code={"import { Breadcrumb } from '@anephenix/ui';"}
					language="jsx"
				/>

				<h2>Usage</h2>
				<Code code={usageSnippet} language="jsx" />

				<h2>Props</h2>
				<PropTable
					rows={[
						["items", "array", "Array of item objects — see shape below"],
						[
							"separator",
							"string | node",
							'Separator rendered between items. Defaults to "/"',
						],
						[
							"className",
							"string",
							"Optional additional CSS class on the list",
						],
					]}
				/>

				<h2>Item shape</h2>
				<PropTable
					rows={[
						["label", "string", "Display text for this breadcrumb step"],
						[
							"href",
							"string",
							"URL for the link. Omit on the last item to mark it as the current page",
						],
					]}
				/>

				<h2>Example</h2>

				<h3>Default separator</h3>
				<div className="docs-example">
					<Breadcrumb items={docsItems} />
				</div>

				<h3>Custom separator</h3>
				<div className="docs-example">
					<Breadcrumb items={settingsItems} separator="›" />
				</div>
			</div>
		</DocsLayout>
	);
}