import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import ProductListingCard from '../ProductListingCard';
import { getArgs } from '../../../tools/controlsHelper';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';
import { productMockWithHTML, productMockWithLongDescription } from '../../../../mocks/product/productListing';
import { listingProductsMock, singleProductListingDataMock as productListingData, singleProductMockListingDataMockWithoutIcon } from '../../../../mocks/listingProducts';
import * as ProductListingCardStories from './ProductListingCard.stories';

<Meta of={ProductListingCardStories} />

# ProductListingCard

<br />

## `ProductListingCards` is used to display the products in the listing page.

<br />

### List mode

<Canvas>
  <Story of={ProductListingCardStories.ListMode} />
</Canvas>

### Grid mode

<Canvas>
  <Story of={ProductListingCardStories.GridMode} />
</Canvas>

### With long overview

<Canvas>
  <Story of={ProductListingCardStories.WithLongOverview} />
</Canvas>

### With HTML in the overview

<Canvas>
  <Story of={ProductListingCardStories.WithHtmlInTheOverview} />
</Canvas>

### With badges

<Canvas>
  <Story of={ProductListingCardStories.WithBadges} />
</Canvas>

### With placeholder image

<Canvas>
  <Story of={ProductListingCardStories.WithPlaceholderImage} />
</Canvas>

## Usage Example

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

<br />

<CollapsibleJsonSnippet summary="settingsData" code={getArgs(ProductListingCard.schema().form)} />

```jsx
import ProductListingCard from '@appdirect/sfb-theme-components/src/atoms/product-listing-card/ProductListingCard';

<ProductListingCard data={productListingData} settings={settingsData}/>
```

## Props

<ArgsTable of={ProductListingCard} />
