import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import { editionsMockData, editionWithDiscountedUnit } from '../../../../../mocks/product/productEditions';
import { CollapsibleJsonSnippet } from '../../../../tools/docTools';
import ProductEditionCardV2 from '../ProductEditionCardV2';
import * as ProductEditionCardV2Stories from './ProductEditionCardV2.stories';

<Meta of={ProductEditionCardV2Stories} />

# ProductEditionCardV2

<br />

## `ProductEditionCardsV2` are used for a single card of edition's details.

<br />

### Default

<Canvas>
  <Story of={ProductEditionCardV2Stories.Default} />
</Canvas>

### Popular edition

<Canvas>
  <Story of={ProductEditionCardV2Stories.PopularEdition} />
</Canvas>

### Premium edition

<Canvas>
  <Story of={ProductEditionCardV2Stories.PremiumEdition} />
</Canvas>

### Selected Edition

<Canvas>
  <Story of={ProductEditionCardV2Stories.Selected} />
</Canvas>

### Discounted Unit

<Canvas>
  <Story of={ProductEditionCardV2Stories.DiscountedUnit} />
</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} />
