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

<Meta title="Atoms/Volume Discount Card" component={VolumeDiscountCard} />

# VolumeDiscountCard
<br />

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

### Default
<Canvas>
    <Story name="Default">
        <div style={{ height: '100vh' }}>
            <VolumeDiscountCard
                data={mockEditionsI18nData}
                mockData={{
                    mockVolumePricing: mockVolumePricingV2
                }}
                showVolumeDiscount
            />
        </div>
    </Story>
</Canvas>

## Usage Example

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

<VolumeDiscountCard onClick={eventCallback} onMouseDown={eventCallback} />
```
## Props

<ArgsTable of={VolumeDiscountCard} />
