import {
  Meta,
  Story,
  Preview,
  Title,
  Subtitle,
  Description,
  Props,
} from '@storybook/addon-docs/blocks';
import { withKnobs } from '@storybook/addon-knobs';

import { Box } from '@material-ui/core';

import { Rating } from '../';
import { RatingStory } from './rating.stories.js';

<Meta title='Originals/Rating' component={Rating} decorators={[withKnobs]}/>

<Title>Rating</Title>

<Description>
  Componente de avaliação
</Description>

<Preview>
  <Story name="Rating">
    <RatingStory />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| maxRating | Valor máximo possível  <br /> 'number' | 5 |
| selected | Valor atualmente selecionado   <br /> 'number' | 0 |
| onChange | Função disparada ao se alterar um valor. Retorna o novo valor.  <br /> 'func' | ( ) => { } |

<Subtitle>Exemplo de Aplicação</Subtitle>

```jsx
<Rating 
  maxRating={10}
  selected={7}
  onChange={handleChange}
/>
```