import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import { resourcesMock } from '../../../../mocks/application/resources';
import { TableContentFromObject, FormOutput, CollapsibleJsonSnippet } from '../../../tools/docTools';
import Resources from '../Resources';
import * as ProductResourcesStories from './ProductResources.stories';
import { getArgs } from '../../../tools/controlsHelper';

export const productResourcesData = {
    public: resourcesMock.public,
    reseller: resourcesMock.reseller,
    i18n: resourcesMock.i18n
};

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

<Meta of={ProductResourcesStories} />

# ProductResources

<br />

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

<br />

### Default

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

### With settings

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

## Usage Example

<CollapsibleJsonSnippet summary="productResourcesData" code={productResourcesData} />

<br />

<CollapsibleJsonSnippet summary="productResourcesSettings" code={getArgs(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={Resources.schema().form} />
