import { Story, Canvas, ArgsTable, Meta } from '@storybook/addon-docs/blocks';

import FeaturedProduct from '../FeaturedProduct';
import { featuredProductSettings, mockProduct, mockProductFree, featuredProductSettingsNoImage } from '../../../../mocks/components/featuredProduct';
import { getKnobs } from '../../../tools/knobsHelper';

export const knobs = () => Object.assign(
    getKnobs(FeaturedProduct.schema().form),
    { product: mockProduct }
)

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

# FeaturedProduct
<br />

## `FeaturedProduct` can be used to showcase a product, while also providing various options for customization.
<br />

### Default
<Canvas>
    <Story name="Default">
        <div>
            <FeaturedProduct settings={featuredProductSettings} />
        </div>
    </Story>
</Canvas>

### Price free
<Canvas>
    <Story name="Price free">
        <div>
            <FeaturedProduct settings={{ ...featuredProductSettings, product: mockProductFree }} />
        </div>
    </Story>
</Canvas>

### No image
<Canvas>
    <Story name="Default image">
        <div>
            <FeaturedProduct settings={featuredProductSettingsNoImage} />
        </div>
    </Story>
</Canvas>

### With settings
<Canvas>
    <Story name="With settings">
        <div>
            <FeaturedProduct settings={knobs()} />
        </div>
    </Story>
</Canvas>

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