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

<Meta title="Atoms/Product Edition Card" component={ProductEditionCard} />

# ProductEditionCard
<br />

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

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

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

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

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

### Added to Cart
<Canvas>
    <Story name="Added to Cart">
        <ProductEditionCard data={editionsSkipConfiguratorMockData[0]} isAddedToCart nonStackableProduct />
    </Story>
</Canvas>

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

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

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

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

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