import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import ProductFeaturedCustomers from '../FeaturedCustomers';
import { customersMock } from '../../../../mocks/product/featured-customers';
import { getArgs } from '../../../tools/controlsHelper';
import { CollapsibleJsonSnippet, FormOutput, TableContentFromObject } from '../../../tools/docTools';
import * as FeaturedCustomersStories from './FeaturedCustomers.stories';

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 of={FeaturedCustomersStories} />

# ProductFeaturedCustomer

<br />

## `ProductFeaturedCustomers` are the customers that you want to feature for a product.

<br />

### With title and images

<Canvas>
  <Story of={FeaturedCustomersStories.WithTitleAndImages} />
</Canvas>

### With settings

<Canvas>
  <Story of={FeaturedCustomersStories.WithSettings} />
</Canvas>

## Usage Example

<CollapsibleJsonSnippet summary="settingsData" code={getArgs(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} />
