import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import ProductTopFeatures from '../TopFeatures';
import { featuresMock } from '../../../../mocks/product/top-features';
import { getArgs } from '../../../tools/controlsHelper';
import { CollapsibleJsonSnippet, FormOutput, TableContentFromObject } from '../../../tools/docTools';
import * as TopFeaturesStories from './TopFeatures.stories';
  
export const topFeaturesSettings = {
    numberOfColumns: 'The number of column(s) where top features will be displayed.'
};

<Meta of={TopFeaturesStories} />

# ProductTopFeatures

<br />

## `ProductTopFeatures` describe the top feature(s) of a product.

<br />

## Default

<Canvas>
  <Story of={TopFeaturesStories.Default} />
</Canvas>

## With settings

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

## Usage Example

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