import {
  Canvas,
  Controls,
  Meta,
  Story,
  Subtitle,
  Title,
} from '@storybook/addon-docs/blocks'
import * as BreadcrumbStories from './Breadcrumb.stories'
import { LifecycleTag, SourceLinks } from '../../docs/components'

<Meta of={BreadcrumbStories} />

<Title>Breadcrumb</Title>
<Subtitle>
  A breadcrumb component that displays the path to the current page. This is the
  primitive version of the component.
</Subtitle>
<SourceLinks
  links={[
    {
      label: 'shadcn/ui',
      href: 'https://ui.shadcn.com/docs/components/breadcrumb',
    },
  ]}
/>
<LifecycleTag variant="Stable" />

<Canvas of={BreadcrumbStories.Default} layout="padded" sourceState="shown" />

## Subcomponents

- `Breadcrumb`: The root component, renders a `<nav>` element.
- `BreadcrumbList`: The container for items, renders an `<ol>` element.
- `BreadcrumbItem`: A list item, renders a `<li>` element.
- `BreadcrumbLink`: A link, renders an `<a>` element and supports `asChild`.
- `BreadcrumbPage`: The current page, renders a `<span>` element.
- `BreadcrumbSeparator`: The separator between items.
- `BreadcrumbEllipsis`: An ellipsis for truncated paths.

## Usage

This Breadcrumb leverages `shadcn` style composition. You can import the primitives and compose them as needed.

### Primitives

- `Breadcrumb`: The root component.
- `BreadcrumbList`: The container for the breadcrumb items.
- `BreadcrumbItem`: A single item in the breadcrumb list.
- `BreadcrumbLink`: A link within a breadcrumb item.
- `BreadcrumbPage`: The current page in the breadcrumb.
- `BreadcrumbSeparator`: The separator between breadcrumb items.
- `BreadcrumbEllipsis`: An ellipsis to indicate a truncated path.

### Example

```tsx
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
} from '@chainlink/blocks'
export function MyBreadcrumb() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/components">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbEllipsis />
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}
```

## Using `asChild` for Custom Links

The `BreadcrumbLink` component includes an `asChild` prop, which allows you to pass a custom link component (e.g., from a router library like Next.js) as its child. This transfers the rendering logic and props to your custom component.

<Canvas of={BreadcrumbStories.WithCustomLinkAsChild} sourceState="shown" />

### Long Path

This example shows a breadcrumb with multiple items but without using the ellipsis, for shorter navigation paths.

<Canvas of={BreadcrumbStories.LongPath} sourceState="shown" />