import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import AdditionalInfo from '../AdditionalInfo';
import { defaultMock as additionalInfoMock, noSidebarMock } from '../../../../mocks/components/productAdditionalInfo';
import { getArgs } from '../../../tools/controlsHelper';
import { TableContentFromObject, FormOutput, CollapsibleJsonSnippet } from '../../../tools/docTools';
import * as AdditionalInfoStories from './AdditionalInfo.stories';
  
export const additionalInfoSettings = {
    columnCount: 'The number of colums of the component layout (1 or 2).',
    infoPosition: 'The position of the content relative at the sidebar (left/right).',
    headerBackground: 'The background color of the sidebar header.',
    sideBarBackground: 'The background color of the sidebar.',
    sideBarBorder: 'The border color of the sidebar.'
};

<Meta of={AdditionalInfoStories} />

# AdditionalInfo

<br />

## `AdditionalInfos` are used to display the additional information of a product.

<br />

### Default

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

### No sidebar

<Canvas>
  <Story of={AdditionalInfoStories.NoSidebar} />
</Canvas>

### With settings

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

## Usage Example

<CollapsibleJsonSnippet summary="additionalInfoData" code={additionalInfoMock} />

<br />

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

```jsx
import AdditionalInfo from '@appdirect/sfb-theme-components/src/components/product-additional-info/AdditionalInfo';

<AdditionalInfo data={additionalInfoData} settings={settingsData}/>
```

## Props

<ArgsTable of={AdditionalInfo} />

## Schema

### Form Settings

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

### Form Output

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