import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import LinkSection from '../LinkSection';
import { TableContentFromObject, FormOutput, CollapsibleJsonSnippet } from '../../../tools/docTools';
import { linkSectionDataMock } from '../../../../mocks/menu/link-section';
import * as LinkSectionStories from './LinkSection.stories';
import { getArgs } from '../../../tools/controlsHelper';

export const linkSectionSettings = {
    alignment: 'The alignment of the LinkCards text.',
    tileColor: 'The background color of the LinkCards text section.',
    imageColor: 'The color of the dividers between the table rows and columns.',
    cornerRadius: 'The corner radius of the LinkCards.'
};

<Meta of={LinkSectionStories} />

# LinkSection

<br />

## `LinkSections` is used to present and link to available card options (user, payment, productTile) in the FAQ

<br />

### Default

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

## Usage Example

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

```jsx
import LinkSection from '@appdirect/sfb-theme-components/src/components/faq-link-section/LinkSection';

<LinkSection settings={linkSectionSettingsData} />
```

## Props

<ArgsTable of={LinkSection} />

## Schema

### Form Settings

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

### Form Output

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