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

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

<Meta of={BundleLogoStories} />

# BundleLogo

<br />

## `BundleLogos` are used to display a product bundle logo with a title.

<br />

### Default

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

## Usage Example

<CollapsibleJsonSnippet summary="dataObj" code={bundleLogoDataMock} />

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

<BundleLogo data={dataObj} />
```

## Props

<ArgsTable of={BundleLogo} />
