import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import { FaqComponent } from '../Faq';
import { getArgs } from '../../../tools/controlsHelper';
import { featuresMock } from '../../../../mocks/product/faq';
import { TableContentFromObject, FormOutput, CollapsibleJsonSnippet } from '../../../tools/docTools';
import * as FaqStories from './Faq.stories';

export const faqSettings = {
    navBackgroundColor: 'The background color of the navigation panel.',
    navBorderColor: 'The border color of the navigation panel.',
    navSelectedColor: 'The background color of the selected item in the navigation panel.',
    navDividerVisible: 'Show/Hide the separators in the navigation section.',
    navPadding: 'The padding of the navigation panel.',
    qAndABackgroundColor: 'The background color of the QA section.',
    qAndASelectedColor: 'The background color of the selected question.',
    isExpandable: 'If set to true the QA section shows one answer at the time. If false all the answers are shown.',
    qAndADividerVisible: 'Show/Hide the separators in the QA section.',
    listPadding: 'The padding of the QA section.'
};

<Meta of={FaqStories} />

# Faq

<br />

## `Faqs` are ideal to create blocks of question/answers.

<br />

### Default

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

## Usage Example

<CollapsibleJsonSnippet summary="faqData" code={featuresMock} />

<br />

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

```jsx
import Faq from '@appdirect/sfb-theme-components/src/components/faq/Faq';

<FaqComponent data={faqData} settings={settingsData} />

```

## Props

<ArgsTable of={FaqComponent} />

## Schema

### Form Settings

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

### Form Output

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