import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import FeatureDetails from '../FeatureDetails';
import { featureDetailsMocks, gSuiteFeatureDetailsMock, tSheetsFeatureDetailsMock, featureDetailsWithHTMLMock } from '../../../../mocks/components/featureDetails';
import { getArgs } from '../../../tools/controlsHelper';
import { TableContentFromObject, FormOutput, CollapsibleJsonSnippet } from '../../../tools/docTools';
import * as FeatureDetailsStories from './FeatureDetails.stories';

export const featureDetailsSettings = {
    columnCount: 'The number of columns in the component layout (1 or 2).',
    alignment: 'The text alignment (left, center, right).',
    imagePosition: 'Sets the position of the images (right, left or alternating right/left).',
    enableImageShadow: 'Show/Hide the image shadows.',
    imageShadowColor: 'Sets the image shadow color.',
    backgroundBlockingColor: 'The background color of the even content blocks.'
};

<Meta of={FeatureDetailsStories} />

# FeatureDetails

<br />

## `FeatureDetails` are templates to showcase the features of a product.

<br />

### Default

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

### With a single characteristic per highlight

<Canvas>
  <Story of={FeatureDetailsStories.WithASingleCharacteristicPerHighlight} />
</Canvas>

### With multiple characteristics per highlight

<Canvas>
  <Story of={FeatureDetailsStories.WithMultipleCharacteristicsPerHighlight} />
</Canvas>

### With HTML in a description

<Canvas>
  <Story of={FeatureDetailsStories.WithHtmlInADescription} />
</Canvas>

## Usage Example

<CollapsibleJsonSnippet summary="productFeaturesData" code={featureDetailsMocks} />

<br />

<CollapsibleJsonSnippet summary="settingsData" code={getArgs(FeatureDetails.schema().form)} />

```jsx
import FeatureDetails from '@appdirect/sfb-theme-components/src/components/product-feature-details/FeatureDetails';

<FeatureDetails
    data={productFeaturesData}
    settings={settingsData)}
/>
```

## Props

<ArgsTable of={FeatureDetails} />

## Schema

### Form Settings

<table>
  <TableContentFromObject obj={featureDetailsSettings} />
</table>

### Form Output

<FormOutput code={FeatureDetails.schema().form} />
