import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import { ComparableProducts } from '../ComparableProducts';
import { comparableProductsMock } from '../../../../mocks/comparableProducts';
import { getArgs } from '../../../tools/controlsHelper';
import { TableContentFromObject, FormOutput, CollapsibleJsonSnippet } from '../../../tools/docTools';
import * as ComparableProductsStories from './ComparableProducts.stories';

export const comparableProductsSettings = {
    displayDividers: 'Show/Hide the dividers between the table rows and columns.',
    headingsPositions: 'The position of the headers (left or inline).',
    isStartingPriceVisible: 'Show/Hide the starting price of the products row.',
    isFeaturesVisible: 'Show/Hide the features of the products row.',
    isScreenshotsVisible: 'Show/Hide the screenshots of the products row.',
    isCategoriesVisible: 'Show/Hide the categories of the products row.',
    isDeveloperVisible: 'Show/Hide the developers of the products row.',
    isEditionsVisible: 'Show/Hide the editions of the products row.',
    isSpecificationsVisible: 'Show/Hide the specifications of the products row.',
    isTopReviewsVisible: 'Show/Hide the top reviews of the products row.',
    headerBackgroundColor: 'The background color of the headers.',
    dividersColor: 'The color of the dividers between the table rows and columns.'
};

<Meta of={ComparableProductsStories} />

# ComparableProducts

<br />

## `ComparableProducts` are used to compare selected products in a side by side grid

<br />

### Default

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

## Usage Example

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

```jsx
import ComparableProducts from '@appdirect/sfb-theme-components/src/components/comparable-products/ComparableProducts';
<ComparableProducts settings={comparableProductsSettingsData} />
```

## Props

<ArgsTable of={ComparableProducts} />

## Schema

### Form Settings

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

### Form Output

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