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

<Meta of={ProductEditionCardStories} />

# ProductEditionCard

<br />

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

<br />

### Default

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

### Popular edition

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

### Premium edition

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

### Selected Edition

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

### Added to Cart

<Canvas>
  <Story of={ProductEditionCardStories.AddedToCart} />
</Canvas>

### Discounted Unit

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