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

export const bundleData = {
    ...productBundleMock.bundle.items[0],
    i18n: productBundleMock.bundle.i18n
};

<Meta title="Components/Bundle Summary" component={BundleSummary} />

# BundleSummary
<br />

## `BundleSummarys` are ready to use templates to show a bundle summary.
<br />

### Default
<Canvas>
    <Story name="Default">
        <BundleSummary
            data={bundleData}
        />
    </Story>
</Canvas>


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

```jsx
import BundleSummary from '@appdirect/sfb-theme-components/src/components/bundle-summary/BundleSummary';

<BundleSummary data={bundleData} />

```

## Props
<ArgsTable of={BundleSummary} />
