import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import { TableContentFromObject, FormOutput, CollapsibleJsonSnippet } from '../../../tools/docTools';
import { navigationMock as navigationData } from '../../../../mocks/product/navigation';
import TabsMenu from '../TabsMenu';
import * as TabsMenuStories from './TabsMenu.stories';

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 of={TabsMenuStories} />

# ProductTabsMenu

<br />

## `ProductTabsMenus` are used as navigation in the product profile page.

<br />

### Default

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

### With settings

<Canvas>
  <Story of={TabsMenuStories.WithSettings} />
</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} />
