import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import { LAYOUT_DEFAULT } from '../../../constants/components/schemas/product-quickview';
import ProductQuickView from '../ProductQuickView';
// Use the same mock as product slider, as quickview is child of slider
import { sliderProductsMock } from '../../../../mocks/product/slider';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';
import * as ProductQuickViewStories from './ProductQuickView.stories';

export const productData = sliderProductsMock[0];

<Meta of={ProductQuickViewStories} />

# ProductQuickView

<br />

## `ProductQuickViews` allows to show summarized details about a product.

<br />

### Default

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

### Detailed

<Canvas>
  <Story of={ProductQuickViewStories.Detailed} />
</Canvas>

  ### 2 columns

  <Canvas>
    <Story of={ProductQuickViewStories.TwoColumns} />
  </Canvas>

  ### No Image

  <Canvas>
    <Story of={ProductQuickViewStories.NoImage} />
  </Canvas>

### With settings

<Canvas>
  <Story of={ProductQuickViewStories.WithSettings} />
</Canvas>

## Usage Example

<CollapsibleJsonSnippet summary="productData" code={productData} />

```jsx
import ProductQuickView from '@appdirect/sfb-theme-components/src/atoms/product-quick-view/ProductQuickView';
import { LAYOUT_DEFAULT } from '@appdirect/sfb-theme-components/src/atoms/product-quick-view/ProductQuickView';

<ProductQuickView data={productData} settings={{ quickviewViewMode: LAYOUT_DEFAULT }}/>
```

## Props

<ArgsTable of={ProductQuickView} />
