import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import ProductReviewDetail from '../ProductReviewDetail';
import { getArgs } from '../../../tools/controlsHelper';
import { TableContentFromObject, FormOutput, CollapsibleJsonSnippet } from '../../../tools/docTools';
import { genericReviewMock, structuredReviewMock } from '../../../../mocks/product/reviews';
import * as ProductReviewDetailStories from './ProductReviewDetail.stories';

export const productReviewDetailSettings = {
    isAvatarVisible: 'Show/Hide the reviewer avatar.'
};

<Meta of={ProductReviewDetailStories} />

# ProductReviewDetail

<br />

## `ProductReviewDetails` provide a template for product reviews.

<br />

### Default

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

### With single text

<Canvas>
  <Story of={ProductReviewDetailStories.WithSingleText} />
</Canvas>

## Usage Example

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

<br />

<CollapsibleJsonSnippet summary="reviewData" code={genericReviewMock} />

```jsx
import ProductReviewDetail
from '@appdirect/sfb-theme-components/src/components/product-review-detail/ProductReviewDetail';

<ProductReviewDetail
    data={reviewData}
    settings={settingsData}
/>

```

## Props

<ArgsTable of={ProductReviewDetail} />

## Schema

### Form Settings

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

### Form Output

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