import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import ProductReviews from '../../../atoms/product-reviews/ProductReviews';
import { getArgs } from '../../../tools/controlsHelper';
import { TableContentFromObject, FormOutput, CollapsibleJsonSnippet } from '../../../tools/docTools';
import { reviewsMock } from '../../../../mocks/product/reviews';
import * as ProductReviewsStories from './ProductReviews.stories';

export const reviewsData = { ...reviewsMock };
export const productReviewsSettings = {
    position: 'The position of the review statistics (left, top, right).',
    isAvatarVisible: 'Show/Hide the avatar of the reviewers.',
    moreReviewsLabel: 'The label of the "More Reviews" button.'
};

<Meta of={ProductReviewsStories} />

# ProductReviews

<br />

## `ProductReviews` are containers that list the reviews for a product.

<br />

### Default

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

## Usage Example

`ProductReviews` components should not be used directly. They need the `ProductReviewsAdapter`
which will perform GraphQL requests to get all the data needed to display the reviews.

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

<br />

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

```jsx
import ProductReviewsAdapter
from '@appdirect/sfb-theme-components/src/components/product-reviews/ProductReviewsAdapter';

<ProductReviewsAdapter
    data={reviewsData}
    settings={settingsData}
/>
```

## Props

<ArgsTable of={ProductReviews} />

## Schema

### Form Settings

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

### Form Output

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