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

import { Card } from '../';
import { BasicCardStory } from './card.stories.js';

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

<Title>Card</Title>

<Description>
  Card básico dos aplicativos Eureca.
</Description>

<Description>
É uma extensão do [Box do Material-Ui](https://material-ui.com/components/box/#box)
e suporta todas as props desse componente.
</Description>

<Preview>
  <Story name="Basic Card">
    <BasicCardStory />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| children | Itens que serão exibidos no card <br /> 'node' \| ['node'] | - |
| style | Objeto para customizar o estilo do card <br /> 'object' | - |
| props | Todas as props disponíveis no Box do Material-UI <br /> | - |

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

```jsx
<Card p={2} width={100} height={100}>
 <div>Conteúdo do Card</div>
</Card>
```