import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { editionsMockData as mockData } from '../../../../../mocks/product/productEditions';
import { CollapsibleJsonSnippet } from '../../../../tools/docTools';
import { ProductEditionListComponent as ProductEditionList } from '../ProductEditionList';

export const editionsData = {
    editions: mockData.items,
    i18n: mockData.i18n,
    callToActions: {
        items: [{
            label: 'Buy Now'
        }]
    }
};

<Meta title="Atoms/Product Edition List" component={ProductEditionList} />

# ProductEditionList
<br />

## `ProductEditionLists` are used to display all the editions available for a product.
<br />

### Default
<Canvas>
    <Story name="Default">
        <ProductEditionList data={editionsData} />
    </Story>
</Canvas>

### Carousel
<Canvas>
    <Story name="Carousel">
        <div style={{ maxWidth: 600, margin: '0 auto' }}>
            <ProductEditionList
                data={{
                    ...editionsData,
                    editions: editionsData.editions.slice(0, 4)
                }}
                carouselEnabled
            />
        </div>
    </Story>
</Canvas>

### Configurator mode
<Canvas>
    <Story name="Configurator mode">
        <ProductEditionList data={editionsData} configuratorMode />
    </Story>
</Canvas>


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

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

<ProductEditionList data={editionsData} />
```

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