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 { OpportunityHeader } from '../';
import { OpportunityHeaderStory } from './opportunity-header.stories.js';

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

<Title>Opportunity Header</Title>

<Description>
  Header da página de uma oportunidade dos aplicativos Eureca.
</Description>

<Preview>
  <Story name="OpportunityHeader">
    <OpportunityHeaderStory />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| headerImage | Imagem principal do header <br /> 'string' | ' ' |
| logo | Logo da empresa responsável pela oportunidade <br /> 'string' | ' ' |
| name | Nome da empresa responsável pela oportunidade <br /> 'string' | ' ' |
| companyId | ID da empresa responsável pela oportunidade <br /> 'string' \| 'number' | null |
| onClickLogo | Função disparada ao se clicar na logo presente no header. Retorna o companyId <br /> 'func' | () => { } |

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

```jsx
<OpportunityHeader headerImage={imageURL} logo={avatarURL} name="Estágio EDP 2020" />
```