import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
import VariantSelectionPreview from '../VariantSelectionPreview';
import { variantImages, selectedOptionsAllValid, selectedOptionsNotAllValid,
    configuratorMock, callToActionsMock } from '../../../../../../mocks/product/product-variants/productVariants';

<Meta title="Components (Preview)/Product Variants/Atoms/VariantSelectionPreview" component={VariantSelectionPreview} />

# VariantSelectionPreview
<br />

## `VariantSelectionPreviews` are used to display the current selected product variant.
<br />

### Default
<Canvas>
    <Story name="Default">
        <VariantSelectionPreview
            selectedOptions={selectedOptionsNotAllValid}
            productName="Product Name"
            callToActions={callToActionsMock}
            configurator={configuratorMock}
            selectedEdition={configuratorMock.selectedEdition}
        />
    </Story>
</Canvas>

### With image and price
<Canvas>
    <Story name="With image and price">
        <VariantSelectionPreview
            selectedOptions={selectedOptionsAllValid}
            productName="Product Name"
            variantImage={variantImages[0]}
            callToActions={callToActionsMock}
            configurator={configuratorMock}
            selectedEdition={configuratorMock.selectedEdition}
        />
    </Story>
</Canvas>


### With disabled variant
<Canvas>
    <Story name="With disabled variant">
        <VariantSelectionPreview
            selectedOptions={selectedOptionsAllValid}
            productName="Product Name"
            variantImage={variantImages[0]}
            callToActions={callToActionsMock}
            configurator={configuratorMock}
            selectedEdition={configuratorMock.selectedEdition}
            isVariantEnabled={false}
        />
    </Story>
</Canvas>

### Condensed
<Canvas>
    <Story name="Condensed">
        <VariantSelectionPreview
            selectedOptions={selectedOptionsAllValid}
            productName="Product Name"
            variantImage={variantImages[0]}
            callToActions={callToActionsMock}
            configurator={configuratorMock}
            selectedEdition={configuratorMock.selectedEdition}
            isCondensed
        />
    </Story>
</Canvas>

## Props
<ArgsTable of={VariantSelectionPreview} />
