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

import { Accordion } from '../src';

const Label = styled.p``;


storiesOf('Accordion', module)
  .add('Default', () => (
    <Accordion
      items={[
        { header: 'header', content: 'conteudo' },
        {
          header: 'header',
          content: <React.Fragment><p>fasdfsdf</p><p>asdfsdfsd</p></React.Fragment>,
          labels: <Label>Novo</Label>
        },
        { header: 'header 3', content: 'conteudoas'}
      ]}
    />
  ))
  .add('automatic', () => (
    <Accordion
      automatic
      items={[
        { header: <h1>Header</h1>, content: 'conteudo' },
        { header: <h2>Header 2</h2>, content: <React.Fragment><p>fasdfsdf</p><p>asdfsdfsd</p></React.Fragment>},
        { header: 'header 3', content: 'conteudoas'}
      ]}
    />
  ));