import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import BreadCrumbs from '../BreadCrumbs';
import { breadCrumbsMock } from '../../../../mocks/product/breadCrumbs';
import * as BreadCrumbsStories from './BreadCrumbs.stories';

<Meta of={BreadCrumbsStories} />

# BreadCrumbs

<br />

## `BreadCrumbs` show the path to the current page.

<br />

### Default

<Canvas>
  <Story of={BreadCrumbsStories.Default} />
</Canvas>

### With home logo

<Canvas>
  <Story of={BreadCrumbsStories.WithHomeLogo} />
</Canvas>

## Usage Example

```jsx
import BreadCrumbs from '@appdirect/sfb-theme-components/src/atoms/bread-crumbs/BreadCrumbs';

<BreadCrumbs
    crumbs={[
        {
            label: 'Faqs',
            url: '/faqs'
        },
        {
            label: 'Settings',
            url: '/settings'
        },
        {
            label: 'Profile',
            url: '/profile'
        }
    ]}
/>

```

## Props

<ArgsTable of={BreadCrumbs} />
