import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import SecondaryNav from '../SecondaryNav';
import { getArgs } from '../../../tools/controlsHelper';
import { CollapsibleJsonSnippet, FormOutput, TableContentFromObject } from '../../../tools/docTools';
import { secondaryNavMock } from '../../../../mocks/menu/secondary-nav';
import { categoriesMock } from '../../../../mocks/menu/categories';
import * as SecondaryNavStories from './SecondaryNav.stories';

export const data = {
    primaryNav: categoriesMock,
    secondaryNav: secondaryNavMock
};

export const secondaryNavSettings = {
    backgroundColor: 'The background color of the secondary navigation.'
};

export const secondaryNavSettingsMock = {
    backgroundColor: '#BBFAF4'
};

<Meta of={SecondaryNavStories} />

# SecondaryNav

<br />

## `SecondayNavs` are the navigation bars that enable you to browse in different product listing pages.

<br />

### Default

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

### With settings

<Canvas>
  <Story of={SecondaryNavStories.WithSettings} />
</Canvas>

## Usage Example

<CollapsibleJsonSnippet summary="settingsData" code={getArgs(SecondaryNav.schema().form)} />

```jsx
import SecondaryNav from
    '@appdirect/sfb-theme-components/src/components/secondary-nav/SecondaryNav';

<ProductFeaturedCustomers settings={settingsData} />

```

## Props

<ArgsTable of={SecondaryNav} />

## Schema

### Form Settings

<table>
  <TableContentFromObject obj={secondaryNavSettings} />
</table>

### Form Output

<FormOutput code={SecondaryNav.schema().form} />
