import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';
import ProductVariants, { ProductVariantsComponent } from '../ProductVariants';
import { productVariantsMock, productVariantsMockWithoutDefaults } from '../../../../mocks/product/product-variants/productVariants';

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

# ProductVariants
<br />

## `ProductVariants` are used to display and select a variant from the available variants for a physical product.
<br />

### Default
<Canvas>
    <Story name="Default">
        <ProductVariantsComponent data={productVariantsMock} />
    </Story>
</Canvas>

### Without default values
<Canvas>
    <Story name="Without default values">
        <ProductVariantsComponent data={productVariantsMockWithoutDefaults} />
    </Story>
</Canvas>

### Loading data
<Canvas>
    <Story name="Loading data">
        <ProductVariantsComponent
            data={{ ...productVariantsMock, isLoadingVariantsData: true }}
        />
    </Story>
</Canvas>

### With error
<Canvas>
    <Story name="With error">
        <ProductVariantsComponent
            data={{ ...productVariantsMock, hasErrorsLoadingVariantsData: {} }}
        />
    </Story>
</Canvas>

## Usage Example
<CollapsibleJsonSnippet
    summary="data"
    code={productVariantsMock}
/>

```jsx
import ProductVariants from
    '@appdirect/sfb-theme-components/src/components/product-variants/ProductVariants';

<ProductVariants data={data} />

```

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