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

<Meta title="Atoms/Volume Pricing Modal" component={VolumePricingModal} />

# VolumePricingModal
<br />

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

### Default
<Canvas>
    <Story name="Default">
        <div style={{ height: '100vh', width: '100vw' }}>
            <VolumePricingModal
                isVisible
                data={mockEditionsI18nData}
                volumePricingData={mockVolumePricingV2}
                formattedTitle="Adobe VIP Pricing"
            />
        </div>
    </Story>
</Canvas>

## Usage Example

```jsx
import VolumePricingModal
from '@appdirect/sfb-theme-components/src/atoms/volume-pricing-modal/VolumePricingModal';

<VolumePricingModal />
```
## Props

<ArgsTable of={VolumePricingModal} />
