import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import ProductCard from '../ProductCard';
import { relatedContentMock } from '../../../../mocks/product/related-content';
import { XSMALL, SMALL, MEDIUM, LARGE } from '../../../constants/sizes'
import { productCardMock, productCardMockWithoutLogo } from '../../../../mocks/product/productCard';


<Meta title="Atoms/Product Card" component={ProductCard} />

# ProductCard
<br />

## `ProductCards` offer a template for product display.
<br />

### Default
<Canvas>
    <Story name="Default">
        <ProductCard cardData={productCardMock} reviewData={relatedContentMock} />
    </Story>
</Canvas>

### Image sizes
<Canvas>
    <Story name="Image sizes">
        <div style={{ margin: '50px 0' }}>
            <ProductCard
                cardData={{ ...productCardMock, size: LARGE.value }}
                settings={
                    {
                        productNameSize: XSMALL.value,
                        descTextSize: XSMALL.value
                    }
                }
            />
        </div>
        <div style={{ margin: '50px 0' }}>
            <ProductCard
                cardData={{ ...productCardMock, size: MEDIUM.value }}
                settings={
                    {
                        productNameSize: XSMALL.value,
                        descTextSize: XSMALL.value
                    }
                }
            />
        </div>
        <div style={{ margin: '50px 0' }}>
            <ProductCard
                cardData={{ ...productCardMock, size: SMALL.value }}
                settings={
                    {
                        productNameSize: XSMALL.value,
                        descTextSize: XSMALL.value
                    }
                }
            />
        </div>
    </Story>
</Canvas>

### Without vendor
<Canvas>
    <Story name="Without vendor">
        <ProductCard
            cardData={productCardMock}
            reviewData={
                {
                    details: {
                        ...relatedContentMock.details,
                        vendor: {}
                    }
                }
            }
        />
    </Story>
</Canvas>

### With ratings
<Canvas>
    <Story name="With ratings">
        <ProductCard
            cardData={productCardMock}
            reviewData={relatedContentMock}
            settings={
                {
                    showRatings: true
                }
            }
        />
    </Story>
</Canvas>

### With placeholder image
<Canvas>
    <Story name="With placeholder image">
        <ProductCard cardData={productCardMockWithoutLogo} reviewData={relatedContentMock} />
    </Story>
</Canvas>


## Usage Example
```jsx
import ProductCard from '@appdirect/sfb-theme-components/src/atoms/product-card/ProductCard';

<ProductCard cardData={{
    title: 'Google Pixelbook',
    details: 'The high performance Chromebook',
    logoSrc:
        'https://d33na3ni6eqf5j.cloudfront.net/app_resources/241879/thumbs_64/image1966147977002842893.png',
    logoSrcset: {
        default: 'https://d33na3ni6eqf5j.cloudfront.net/app_resources/241879/thumbs_64/image1966147977002842893.png',
        '2x': 'https://d33na3ni6eqf5j.cloudfront.net/app_resources/241879/thumbs_64/image1966147977002842893-2x.png',
        '1x': 'https://d33na3ni6eqf5j.cloudfront.net/app_resources/241879/thumbs_64/image1966147977002842893.png'
    }
    }}
    reviewData={{
        details: {
            reviews: {
                rating: 4,
                numRatings: 25
            },
            vendor: {
                title: 'Developer',
                items: [{
                    label: 'Google'
                }]
            }
        }
    }}
/>
```

## Props
<ArgsTable of={ProductCard} />
