import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { getKnobs } from '../../../tools/knobsHelper';
import { resourcesMock } from '../../../../mocks/product/resources';
import { TableContentFromObject, FormOutput, CollapsibleJsonSnippet } from '../../../tools/docTools';
import Resources from '../Resources';

export const productResourcesData = {
    header: resourcesMock.public.header,
    documents: resourcesMock.public.documents,
    videos: resourcesMock.public.videos
};

export const productResourcesSettings = {
    spacing: 'The spacing between resources.',
    columns: 'The number of resources in a single row.'
};

<Meta title="Components/Product Resources" component={Resources} />

# ProductResources
<br />

## `ProductResources` are used as to display document and video resources about the product.
<br />

### Default
<Canvas>
    <Story name="Default">
        <Resources data={productResourcesData} />
    </Story>
</Canvas>

### With settings
<Canvas>
    <Story name="With Settings">
        <Resources
            data={productResourcesData}
            settings={getKnobs(Resources.schema().form)}
        />
    </Story>
</Canvas>

## Usage Example
<CollapsibleJsonSnippet
    summary="productResourcesData"
    code={productResourcesData}
/>
<br />
<CollapsibleJsonSnippet
    summary="productResourcesSettings"
    code={getKnobs(Resources.schema().form)}
/>

```jsx
import Resources from '@appdirect/sfb-theme-components/src/components/product-resources/Resources';

<Resources data={productResourcesData} settings={productResourcesSettings} />
```

## Props
<ArgsTable of={Resources} />

## Schema
### Form Settings
<table>
    <TableContentFromObject obj={productResourcesSettings} />
</table>

### Form Output
<FormOutput code={getKnobs(Resources.schema().form)} />
