import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import ProductBundleViewer from '../ProductBundleViewer';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';
import { productBundleMock } from '../../../../mocks/product/productBundles';
import * as ProductBundleViewerStories from './ProductBundleViewer.stories';

export const productBundleData = productBundleMock.bundle;

<Meta of={ProductBundleViewerStories} />

# ProductBundleViewer

<br />

## `ProductBundleViewers` are ready to use templates to display a bundle.

<br />

### Default

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

## Usage Example

<CollapsibleJsonSnippet summary="productBundleData" code={productBundleData} />

```jsx
import ProductBundleViewer
from '@appdirect/sfb-theme-components/src/components/product-bundle-viewer/ProductBundleViewer';

<ProductBundleViewer data={productBundleData} />

```

## Props

<ArgsTable of={ProductBundleViewer} />
