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 { Logo } from '../';
import { LogoStory } from './logo.stories.js';

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

<Title>Logo</Title>

<Description>
  Logo dos aplicativos Eureca. 
</Description>

<Preview>
  <Story name="Logo">
    <LogoStory />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| variant | Variante da logo <br /> 'default' \| 'reduced' | 'default' |

<Subtitle>Variações</Subtitle>

> A logo pode ter as variantes `default` ou `reduced`

<Preview>
  <div>
    <Logo variant='default' onClick={() => { }} />
    <Box mt={3}>
      <Logo variant='reduced' onClick={() => { }} />
    </Box>
  </div>
</Preview>

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

```jsx
<Logo variant='reduced' onClick={handleClick} />
```