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

import { UserHomeCard } from '../';
import { HomeUserCardStory } from './user-home.stories.js';

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

<Title>User Home Card</Title>

<Description>
  User Home Card dos aplicativos Eureca.
</Description>

<Description>
É uma extensão do componente Card.
</Description>

<Preview>
  <Story name="User Home Card">
    <HomeUserCardStory />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| icon | Ícone a ser exibido no card <br /> 'object' | null |
| title | Título a ser exibido no card <br /> 'string' | '' |
| onClick | Função de onClick do card <br /> 'string' | () => { } |
| color | Cor do título e do cículo <br /> 'string' | '' |
| children | Conteúdo do card <br /> 'string' \| 'element' | null |

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

```jsx
<UserHomeCard 
  icon={<FaEye />}
  title='Título do card'
  onClick={handleClick}
  color='#EBEBEB'
>
  Texto interno do card
</UserHomeCard>
```