import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';
import { productBundleMock } from '../../../../mocks/product/productBundles';
import BundleTabsMenu from '../BundleTabsMenu';

<Meta title="Components/Bundle Tabs Menu" component={BundleTabsMenu} parameters={{ layout: 'fullscreen' }} />

# BundleTabsMenus
<br />

## `BundleTabsMenus` are used as mobile navigation in the bundle page.
<br />

### Default
<Canvas>
    <Story name="Default">
        <p className="d-none d-lg-block">Resize to tablet/mobile</p>
        <BundleTabsMenu data={productBundleMock.bundle} />
    </Story>
</Canvas>

## Usage Example
<CollapsibleJsonSnippet
    summary="bundleTabsMenuData"
    code={productBundleMock.bundle}
/>

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

<BundleTabsMenu data={bundleTabsMenuData} />
```

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