import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import ProductListingCard from '../ProductListingCard';
import { getKnobs } from '../../../tools/knobsHelper';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';
import { productMockWithHTML, productMockWithLongDescription } from '../../../../mocks/product/productListing';
import { listingProductsMock, singleProductListingDataMock as productListingData, singleProductMockListingDataMockWithoutIcon } from '../../../../mocks/listingProducts';


<Meta title="Atoms/ProductListingCard" component={ProductListingCard} />

# ProductListingCard
<br />

## `ProductListingCards` is used to display the products in the listing page.
<br />

### List mode
<Canvas>
    <Story name="List mode">
        <ProductListingCard
            data={productListingData}
            settings={getKnobs(ProductListingCard.schema().form)}
        />
    </Story>
</Canvas>

### Grid mode
<Canvas>
    <Story name="Grid mode">
        <div style={{ width: 400 }}>
            <ProductListingCard
                data={productListingData}
                settings={getKnobs(ProductListingCard.schema().form)}
                showAsGrid
            />
        </div>
    </Story>
</Canvas>

### With long overview
<Canvas>
    <Story name="With long overview">
        <ProductListingCard
            data={productMockWithLongDescription}
            settings={getKnobs(ProductListingCard.schema().form)}
        />
    </Story>
</Canvas>

### With HTML in the overview
<Canvas>
    <Story name="With HTML in the overview">
        <ProductListingCard
            data={productMockWithHTML}
            settings={getKnobs(ProductListingCard.schema().form)}
        />
    </Story>
</Canvas>

### With badges
<Canvas>
    <Story name="With badges">
        <ProductListingCard
            data={listingProductsMock.items[2]}
            settings={getKnobs(ProductListingCard.schema().form)}
        />
    </Story>
</Canvas>

### With placeholder image
<Canvas>
    <Story name="With placeholder image">
        <ProductListingCard
            data={singleProductMockListingDataMockWithoutIcon}
            settings={getKnobs(ProductListingCard.schema().form)}
        />
    </Story>
</Canvas>

## Usage Example
<CollapsibleJsonSnippet
    summary="productListingData"
    code={productListingData}
/>
<br />
<CollapsibleJsonSnippet
    summary="settingsData"
    code={getKnobs(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} />
