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

<Meta of={CollapsibleBreadcrumbStories} />

<Title>CollapsibleBreadcrumb</Title>
<Subtitle>
  An abstraction that takes an array of items and automatically handles
  responsive collapsing with an ellipsis when there are more than 5 items.
</Subtitle>
<LifecycleTag variant="Stable" />

<Canvas of={CollapsibleBreadcrumbStories.Default} sourceState="shown"></Canvas>
<Controls />

## Usage

As an abstraction, `CollapsibleBreadcrumb` simplifies the creation of a breadcrumb by accepting an array of items and managing the underlying primitives automatically.

### Import

```tsx
import { CollapsibleBreadcrumb } from '@chainlink/blocks'
```

### Example

```tsx
const items = [
  { label: 'Home', href: '/' },
  { label: 'Library', href: '/library' },
  { label: 'Data', href: '/data' },
  { label: 'Current', href: '/current' },
]

export default function MyApp() {
  return <CollapsibleBreadcrumb items={items} />
}
```

## Examples

### Without Ellipsis

When there are 5 or fewer items, the breadcrumb will display all items without an ellipsis.

<Canvas of={CollapsibleBreadcrumbStories.WithoutEllipsis} sourceState="shown" />

### With Custom Link

You can provide a `renderLink` function to customize the link component, for example, to use a framework's router link.

<Canvas of={CollapsibleBreadcrumbStories.WithCustomLink} sourceState="shown" />

### Gallery

The component's responsive behavior is showcased below, from a single item up to ten items.

<Canvas of={CollapsibleBreadcrumbStories.Gallery} sourceState="shown" />

<div className="h-8" />

## Automatic Ellipsis

When more than 5 breadcrumb items are passed to the component, the Breadcrumb automatically displays an ellipsis in place of the middle items.

For example, if you pass 6 or more items, the component will show the first and last items with an ellipsis in between.

<div className="h-8" />

## Using a Custom Link Component

If you are using a framework such as Next.js, you can pass your custom link renderer via the `renderLink` prop. The `renderLink` function receives the link's label and href, and must return a React element. For example:

```tsx
import Link from 'next/link'
import { CollapsibleBreadcrumb } from '@chainlink/blocks'

const items = [
  { label: 'Home', href: '/' },
  { label: 'Library', href: '/library' },
  { label: 'Data', href: '/data' },
  { label: 'Current', href: '/current' },
]

const renderLink = ({ label, href }: { label: string; href: string }) => (
  <Link href={href}>{label}</Link>
)

export default function MyApp() {
  return <CollapsibleBreadcrumb items={items} renderLink={renderLink} />
}
```

<div className="h-8" />