import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import { reviewsMock as ratingMock, reviewsFractionalMock as ratingFractionalMock } from '../../../../mocks/product/related-content/details/reviews';
import Rating from '../Rating';
import * as RatingStories from './Rating.stories';

<Meta of={RatingStories} />

# Rating

<br />

## `Ratings` provide a static template for rating display.

<br />

### Default

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

### Fractional

<Canvas>
  <Story of={RatingStories.Fractional} />
</Canvas>

## Usage Example

```jsx
import Rating from '@appdirect/sfb-theme-components/src/atoms/rating/Rating';

<Rating rating={4} numRatings={25} />
```

## Props

<ArgsTable of={Rating} />
