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

<Meta title="Components (Preview)/Product Configurator V2/Atoms/Product Edition Card V2" component={ProductEditionCardV2} />

# ProductEditionCardV2
<br />

## `ProductEditionCardsV2` are used for a single card of edition's details.
<br />

### Default
<Canvas>
    <Story name="Default">
        <ProductEditionCardV2 data={editionsMockData.items[0]} />
    </Story>
</Canvas>

### Popular edition
<Canvas>
    <Story name="Popular edition">
        <ProductEditionCardV2 data={editionsMockData.items[1]} />
    </Story>
</Canvas>

### Premium edition
<Canvas>
    <Story name="Premium edition">
        <ProductEditionCardV2 data={editionsMockData.items[2]} />
    </Story>
</Canvas>

### Selected Edition
<Canvas>
    <Story name="Selected">
        <ProductEditionCardV2 data={editionsMockData.items[0]} isSelected />
    </Story>
</Canvas>

### Discounted Unit
<Canvas>
    <Story name="Discounted Unit">
        <ProductEditionCardV2 data={editionWithDiscountedUnit} />
    </Story>
</Canvas>

## Usage Example
<CollapsibleJsonSnippet
    summary="editionData"
    code={editionsMockData.items[2]}
/>

```jsx
import ProductEditionCardV2 from
    '@appdirect/sfb-theme-components/src/atoms/product-edition-v2/card/ProductEditionCardV2';

<ProductEditionCardV2 data={editionData} />
```

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