import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import ProductFeaturedCustomers from '../FeaturedCustomers';
import { customersMock } from '../../../../mocks/product/featured-customers';
import { getKnobs } from '../../../tools/knobsHelper';
import { CollapsibleJsonSnippet, FormOutput, TableContentFromObject } from '../../../tools/docTools';

export const data = {
    overview: {
        ...customersMock
    }
};

export const featuredCustomerSettings = {
    grayscale: 'Show/Hide a grayscale filter on top of the featured customers logo.',
    autoplay: 'Enable/Disable autoplay of the featured customers banner.',
    autoplaySpeed: 'The autoplay speed of the featured customers banner.'
};

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

# ProductFeaturedCustomer
<br />

## `ProductFeaturedCustomers` are the customers that you want to feature for a product.
<br />

### With title and images
<Canvas>
    <Story name="With title and images">
        <ProductFeaturedCustomers data={data} />
    </Story>
</Canvas>

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

## Usage Example
<CollapsibleJsonSnippet
    summary="settingsData"
    code={getKnobs(ProductFeaturedCustomers.schema().form)}
/>

```jsx
import ProductFeaturedCustomer from
    '@appdirect/sfb-theme-components/src/components/product-featured-customers/FeaturedCustomers';

<ProductFeaturedCustomers settings={settingsData} />

```
## Props

<ArgsTable of={ProductFeaturedCustomers} />

## Schema
### Form Settings
<table>
    <TableContentFromObject obj={featuredCustomerSettings} />
</table>

### Form Output
<FormOutput code={ProductFeaturedCustomers.schema().form} />
