import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import ProductDescription from '../ProductDescription';
import { getArgs } from '../../../tools/controlsHelper';
import { TableContentFromObject, FormOutput, CollapsibleJsonSnippet } from '../../../tools/docTools';
import { defaultMock as mockData } from '../../../../mocks/components/productViewerDescription';
import * as ProductDescriptionStories from './ProductDescription.stories';
  
export const productDescriptionSettings = {
    isPricesVisible: 'Show/Hide the product price.',
    isAddonsVisible: 'Show/Hide the available addons.'
};

export const containerStyles = { maxWidth: 600, margin: '0 auto' };

<Meta of={ProductDescriptionStories} />

# ProductDescription

<br />

## `ProductDescriptions` are used to display a product description with price and addons.

<br />

### Default

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

### Small container

<Canvas>
  <Story of={ProductDescriptionStories.SmallContainer} />
</Canvas>

### With settings

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

## Usage Example

<CollapsibleJsonSnippet summary="descriptionData" code={mockData} />

<br />

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

```jsx
import ProductDescription from '@appdirect/sfb-theme-components/src/components/product-description/ProductDescription';

<ProductDescription
    data={descriptionData}
    settings={settingsData}
/>

```

## Props

<ArgsTable of={ProductDescription} />

## Schema

### Form Settings

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

### Form Output

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