import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import ProductTopFeatures from '../TopFeatures';
import { featuresMock } from '../../../../mocks/product/top-features';
import { getKnobs } from '../../../tools/knobsHelper';
import { CollapsibleJsonSnippet, FormOutput, TableContentFromObject } from '../../../tools/docTools';

export const topFeaturesSettings = {
    numberOfColumns: 'The number of column(s) where top features will be displayed.'
};

<Meta title="Components/Product Top Features" component={ProductTopFeatures} />

# ProductTopFeatures
<br />

## `ProductTopFeatures` describe the top feature(s) of a product.
<br />

## Default
<Canvas>
    <Story name="Default">
        <ProductTopFeatures data={featuresMock} />
    </Story>
</Canvas>

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

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

```jsx
import ProductTopFeatures from
    '@appdirect/sfb-theme-components/src/components/product-top-features/TopFeatures';

<ProductTopFeatures settings={settingsData} />

```
## Props

<ArgsTable of={ProductTopFeatures} />

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

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