import { Meta, Story, ArgsTable, Canvas } from '@storybook/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';
import * as ProductCardStories from './ProductCard.stories';

<Meta of={ProductCardStories} />

# ProductCard

<br />

## `ProductCards` offer a template for product display.

<br />

### Default

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

### Image sizes

<Canvas>
  <Story of={ProductCardStories.ImageSizes} />
</Canvas>

### Without vendor

<Canvas>
  <Story of={ProductCardStories.WithoutVendor} />
</Canvas>

### With ratings

<Canvas>
  <Story of={ProductCardStories.WithRatings} />
</Canvas>

### With placeholder image

<Canvas>
  <Story of={ProductCardStories.WithPlaceholderImage} />
</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} />
