import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import SelectedAddon from '../SelectedAddon';
import { selectedAddonsMock } from '../../../../mocks/product/configuratorSelectedAddons';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';
import * as SelectedAddonStories from './SelectedAddon.stories';

export const addonData = selectedAddonsMock.configurator.selectedAddons[0];

<Meta of={SelectedAddonStories} />

# SelectedAddon

<br />

## `SelectedAddons` are useful to display addons in contexts like product previews.

<br />

### Default

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

## Usage Example

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

```jsx
import SelectedAddon from '@appdirect/sfb-theme-components/src/atoms/selected-addon/SelectedAddon';

<SelectedAddon data={addonData} />
```

## Props

<ArgsTable of={SelectedAddon} />
