import * as React from 'react';
import { storiesOf } from '@storybook/react';
import styled from 'styled-components';

import { Card, GlobalStyle, Title, Text } from '../src';

const Wrapper = styled.div`
  max-width: 400px;
  height: 400px;
  margin: 20px;
`;

storiesOf('Cards', module)
  .add('Default', () => (
    <React.Fragment>
      <GlobalStyle />
      <Wrapper>
        <Card>
          <Title.H3>Sustentabilidade</Title.H3>
          <Text.P>
            Acreditamos que a forma de conduzir os negócios é o que torna uma empresa parceira e corresponsável pelo desenvolvimento sustentável e baseamos nossa atuação nos Princípios para Sustentabilidade em Seguros.
          </Text.P>
        </Card>
      </Wrapper>
    </React.Fragment>
  ))
  .add('Interactive', () => (
    <React.Fragment>
      <GlobalStyle />
      <Wrapper>
        <Card interactive>
          teste
        </Card>
      </Wrapper>
    </React.Fragment>
  ));