import { Story, Canvas, ArgsTable, Meta } from '@storybook/addon-docs/blocks';
import BundleCard from '../BundleCard';
import { getBundlePricing } from '../../../components/product-bundles/ProductBundles';
import { productBundleMock } from '../../../../mocks/product/productBundles';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';

export const bundle = productBundleMock.bundle.items[0];

export const bundleDataMock = {
    ...bundle,
    pricing: getBundlePricing(bundle.name, bundle.edition.name, productBundleMock.bundle.pricing.editions)
};

<Meta title="Atoms/Bundle Card" component={BundleCard} />

# BundleCard
<br />

## `BundleCards` are used to display a product bundle card description.
<br />

### Default
<Canvas>
    <Story name="Default">
        <BundleCard {...bundle} />
    </Story>
</Canvas>

### With pricing
<Canvas>
    <Story name="With pricing">
        <BundleCard {...bundleDataMock} />
    </Story>
</Canvas>

## Usage Example
<CollapsibleJsonSnippet
    summary="dataObj"
    code={bundleDataMock}
/>

```jsx
import BundleCard from '@appdirect/sfb-theme-components/src/atoms/bundle-card/BundleCard';

<BundleCard card={bundleDataMock.card} edition={bundleDataMock.edition} pricing={bundleDataMock.pricing} />
```
## Props
<ArgsTable of={BundleCard} />
