import { Meta, Story, Canvas, ArgsTable } from '@storybook/blocks';
import VariantOptionSwatch from '../VariantOptionSwatch';
import { disableOption, productVariantsMock } from '../../../../../../mocks/product/product-variants/productVariants';
import { parseProduct } from '../../../../../tools/parsers/productParser';
import * as VariantOptionSwatchStories from './VariantOptionSwatch.stories';

export const variantOption = parseProduct(productVariantsMock).variantOptions[1];
export const variantOptionWithDisabled = disableOption(variantOption);

<Meta of={VariantOptionSwatchStories} />

# VariantOptionSwatch

<br />

## `VariantOptionSwatchs` are used to display variant options for colors.

<br />

### Default

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

### With disabled element

<Canvas>
  <Story of={VariantOptionSwatchStories.WithDisabledElement} />
</Canvas>

## Props

<ArgsTable of={VariantOptionSwatch} />
