import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import ProductBundles from '../ProductBundles';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';
import { bundleMock as productBundleMock } from '../../../../mocks/bundle'
import * as ProductBundlesStories from './ProductBundles.stories';

<Meta of={ProductBundlesStories} />

# ProductBundles

<br />

## `ProductBundles` are templates to display a bundle of products.

<br />

### Default

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

### Carousel bundles

<Canvas>
  <Story of={ProductBundlesStories.CarouselBundles} />
</Canvas>

## Usage Example

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

```jsx
import ProductBundles from '@appdirect/sfb-theme-components/src/components/product-bundles/ProductBundles';

<ProductBundles data={productBundleMock} />

```

## Props

<ArgsTable of={ProductBundles} />
