import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { addonsMock } from '../../../../../mocks/product/description/addons';
import { CollapsibleJsonSnippet } from '../../../../tools/docTools';
import ProductAddonList from '../ProductAddonList';

export const addonsData = {
    addonProducts: {
        items: addonsMock,
        i18n: {
            addons: 'Add-ons available',
            selectAddonsTitle: 'Add-ons available for this plan',
            inclusions: 'Included'
        }
    }
};

<Meta title="Atoms/Product Addon List" component={ProductAddonList} />

# ProductAddonList
<br />

## `ProductAddonLists` are used to present the list of available addons for a product.
<br />

### Default
<Canvas>
    <Story name="Default">
        <ProductAddonList data={addonsData} />
    </Story>
</Canvas>

### Carousel
<Canvas>
    <Story name="Carousel">
        <div style={{ maxWidth: 600, margin: '0 auto' }}>
            <ProductAddonList data={addonsData} carouselEnabled />
        </div>
    </Story>
</Canvas>

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

```jsx
import ProductAddonList from '@appdirect/sfb-theme-components/src/atoms/product-addons-list/ProductAddonList';

<ProductAddonList data={addonsData} />
```

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