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

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

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

<Meta of={BundleCardStories} />

# BundleCard

<br />

## `BundleCards` are used to display a product bundle card description.

<br />

### Default

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

### With pricing

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