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

import { EvaluationHeader } from '../';
import { EvaluationHeaderStory } from './evaluation-header.stories.js';

<Meta title='Originals/Evaluation Header' component={EvaluationHeader} decorators={[withKnobs]}/>

<Title>Evaluation Header</Title>

<Description>
  Evaluation Header dos aplicativos Eureca.
</Description>

<Preview>
  <Story name="Evaluation Header">
    <EvaluationHeaderStory />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| type | Tipo da avaliação <br /> 'fit' \| 'link' \| 'formulário' \| 'pdf' \| 'video' \| 'audio', | 'fit' |
| status | Status da avaliação <br /> 'pending' \| 'completed' \| 'disqualified' | 'pending' |
| title | Título da avaliação <br /> 'string' | '' |
| name | Nome do usuário sendo avaliado <br /> 'string' | '' |
| icon | Ícone do header <br /> 'object' | null |

<Subtitle>Tipos</Subtitle>

<Preview>
<EvaluationHeader
  type='pdf'
  status='pending'
  title='Desafio #2 Mão na massa'
  name='Laura M. K.'
/>
<EvaluationHeader
  type='video'
  status='completed'
  title='Desafio #2 Mão na massa'
  name='Laura M. K.'
/>
<EvaluationHeader
  type='fit'
  status='disqualified'
  title='Desafio #2 Mão na massa'
  name='Laura M. K.'
/>
</Preview>

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

```jsx
<EvaluationHeader
  type='pdf'
  status='completed'
  title='Desafio #2 Mão na massa'
  name='Laura M. K.'
  icon=<FiPaperclip />
/>
```