import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import ProductFeaturedQuotes from '../ProductFeaturedQuotes';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';
import { reviewsMock } from '../../../../mocks/product/reviews';
import { LAYOUT_HORIZONTAL } from '../../../constants/layouts';

<Meta title="Components/Product Featured Quotes" component={ProductFeaturedQuotes} />

# ProductFeaturedQuotes
<br />

## `ProductFeaturedQuotes` are used to display featured quotes about a product.
<br />

### Default
<Canvas>
    <Story name="Default">
        <div style={{ width: 300 }}>
            <ProductFeaturedQuotes data={reviewsMock} />
        </div>
    </Story>
</Canvas>

### Horizontal
<Canvas>
    <Story name="Horizontal">
        <ProductFeaturedQuotes
            data={{ ...reviewsMock, layout: LAYOUT_HORIZONTAL }}
        />
    </Story>
</Canvas>

### Custom logo size
<Canvas>
    <Story name="Custom logo size">
        <ProductFeaturedQuotes data={{ ...reviewsMock, logoSize: 120 }} />
    </Story>
</Canvas>

### Custom logo spacing
<Canvas>
    <Story name="Custom logo spacing">
        <ProductFeaturedQuotes data={{ ...reviewsMock, logoSpacing: 50 }} />
    </Story>
</Canvas>

## Usage Example
<CollapsibleJsonSnippet
    summary="reviewsData"
    code={reviewsMock}
/>

```jsx
import ProductFeaturedQuotes
from '@appdirect/sfb-theme-components/src/components/product-featured-quotes/ProductFeaturedQuotes';

<ProductFeaturedQuotes data={reviewsData} />

```

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