import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import BreadCrumbs from '../BreadCrumbs';
import { breadCrumbsMock } from '../../../../mocks/product/breadCrumbs';

<Meta title="Atoms/BreadCrumbs" component={BreadCrumbs} />

# BreadCrumbs
<br />

## `BreadCrumbs` show the path to the current page.
<br />

### Default
<Canvas>
    <Story name="Default">
        <BreadCrumbs
            {...breadCrumbsMock}
        />
    </Story>
</Canvas>

### With home logo
<Canvas>
    <Story name="With Home Logo">
        <BreadCrumbs
            baseLinkUrl="/home"
            baseLinkText="Home page"
            baseIconName="homeNav"
            crumbs={[
                {
                    label: 'Faqs',
                    url: '/faqs'
                },
                {
                    label: 'Settings',
                    url: '/settings'
                },
                {
                    label: 'Profile',
                    url: '/profile',
                    isActive: true
                }
            ]}
        />
    </Story>
</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} />
