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

import { MobileCard } from '../';
import { MobileCardStory } from './mobile-card.stories.js';

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

<Title>Mobile Card</Title>

<Description>
  Componente de card mobile utilizado no Wizard da aplicação do jovem.
</Description>

<Preview>
  <Story name="MobileCard">
    <MobileCardStory />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| icon | Ícone presente no card.  <br /> 'object' | null |
| onClick | Função disparada ao se clicar no card.  <br /> 'func' | () => {} |
| completed | Booleano que comtrola o estado completed do card  <br /> 'bool' | false |
| title | Título do card  <br /> 'string' | '' |
| disabled | Booleano que controla o estado disabled do card  <br /> 'bool' | false |
| step | Valor do passo ao qual o card se refere  <br /> 'number' | 0 |

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

```jsx
<MobileCard
  icon={<FiThumbsUp />}
  onClick={handleClick}
  completed={false}
  title='Informações Gerais'
  disabled={false}
  step={1}
/>
```