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

<Meta title="Atoms/Rating" component={Rating} />

# Rating
<br />

## `Ratings` provide a static template for rating display.
<br />

### Default
<Canvas>
    <Story name="Default">
        <Rating {...ratingMock} />
    </Story>
</Canvas>

### Fractional
<Canvas>
    <Story name="Fractional">
        <Rating {...ratingFractionalMock} />
    </Story>
</Canvas>


## Usage Example

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

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

<ArgsTable of={Rating} />
