import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import VolumePricingCard from '../VolumePricingCard';
import { mockVolumePricingV2, mockEditionsI18nData } from '../../../../mocks/product/volumePricing';

export const editionsData = mockVolumePricingV2.marketplaceProduct.editions;

<Meta title="Atoms/Volume Pricing Card" component={VolumePricingCard} />

# VolumePricing
<br />

## `VolumePricingCard` is used to display volume based discounts available for product editions.
<br />

### Default
<Canvas>
    <Story name="Default">
        <div style={{ maxWidth: 816 }}>
            <VolumePricingCard data={mockEditionsI18nData} editions={editionsData} />
        </div>
    </Story>
</Canvas>

## Usage Example

```jsx
import VolumeDiscountCard
from '@appdirect/sfb-theme-components/src/atoms/volume-pricing-card/VolumePricingCard';

<VolumePricingCard />
```
## Props

<ArgsTable of={VolumePricingCard} />
