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

<Meta of={ProductVariantsStories} />

# ProductVariants

<br />

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

<br />

### Default

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

### Without default values

<Canvas>
  <Story of={ProductVariantsStories.WithoutDefaultValues} />
</Canvas>

### Loading data

<Canvas>
  <Story of={ProductVariantsStories.LoadingData} />
</Canvas>

### With error

<Canvas>
  <Story of={ProductVariantsStories.WithError} />
</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} />
