import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { getKnobs } from '../../../tools/knobsHelper';
import { TableContentFromObject, FormOutput, CollapsibleJsonSnippet } from '../../../tools/docTools';
import { navigationMock as navigationData } from '../../../../mocks/product/navigation';
import TabsMenu from '../TabsMenu';

export const tabMenuSettings = {
    linkSpacing: 'The spacing (in pixel) between tabs.',
    height: 'The height of the navigation.',
    textColor: 'The color of the navigation links.',
    borderColor: 'The color of the border under the navigation.',
    backgroundColor: 'The background-color of the navigation.'
};

<Meta title="Components/Tabs Menu" component={TabsMenu} />

# ProductTabsMenu
<br />

## `ProductTabsMenus` are used as navigation in the product profile page.
<br />

### Default
<Canvas>
    <Story name="Default">
        <TabsMenu data={navigationData} />
    </Story>
</Canvas>

### With settings
<Canvas>
    <Story name="With Settings">
        <TabsMenu
            data={navigationData}
            settings={getKnobs(TabsMenu.schema().form)}
        />
    </Story>
</Canvas>

## Usage Example
<CollapsibleJsonSnippet
    summary="navigationData"
    code={navigationData}
/>

```jsx
import TabsMenu from '@appdirect/sfb-theme-components/src/components/product-tabs-menu/TabsMenu';

<TabsMenu data={navigationData} />
```

## Props
<ArgsTable of={TabsMenu} />

## Schema
### Form Settings
<table>
    <TableContentFromObject obj={tabMenuSettings} />
</table>

### Form Output
<FormOutput code={TabsMenu.schema().form} />
