import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import SelectionPreview from '../SelectionPreview';
import { selectedEditionsMock } from '../../../../mocks/product/configuratorSelectedEdition';
import { selectedAddonsMock, selectedAddonsMultiButtonMock } from '../../../../mocks/product/configuratorSelectedAddons';
import { productCardMock } from '../../../../mocks/product/productCard';
import * as SelectionPreviewStories from './SelectionPreview.stories';

<Meta of={SelectionPreviewStories} />

# SelectionPreview

<br />

## `SelectionPreviews` provide a template for product preview display.

<br />

### With only selected edition

<Canvas>
  <Story of={SelectionPreviewStories.WithOnlySelectedEdition} />
</Canvas>

### With selected addons

<Canvas>
  <Story of={SelectionPreviewStories.WithSelectedAddons} />
</Canvas>

### With image

<Canvas>
  <Story of={SelectionPreviewStories.WithImage} />
</Canvas>

### With multiple buttons

<Canvas>
  <Story of={SelectionPreviewStories.WithMultipleButtons} />
</Canvas>

### Condensed

<Canvas>
  <Story of={SelectionPreviewStories.Condensed} />
</Canvas>

### Fullscreen

<Canvas>
  <Story of={SelectionPreviewStories.Fullscreen} />
</Canvas>

## Usage Example

```jsx
import SelectionPreview from '@appdirect/sfb-theme-components/src/atoms/selection-preview/SelectionPreview';

<SelectionPreview data={selectionData} />
```

## Props

<ArgsTable of={SelectionPreview} />
