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

import { Anchor, Tabs } from '../src';

const Label = styled.p``;
const Box1 = styled.div`background-color: white; height: 500px;`;
const Box2 = styled.div`background-color: blue; height: 500px;`;
const Box3 = styled.div`background-color: black; height: 500px;`;
const Header = styled.header`background-color: blue; height: 200px;`;


storiesOf('Accordion', module)
  .add('Default', () => (
    <React.Fragment>
      <Header>Nosso HEader</Header>
      <Anchor anchors={[
          { id: 'section-1', text: 'Seção 1' },
          { id: 'section-2', text: 'Seção 2' },
          { id: 'section-3', text: 'Seção 3' },
        ]}
      />
      <Box1 id='section-1'>
        <Tabs headers={['HTML', 'CSS', 'React', 'Angular']}>
          <Tabs.Panel fromHeader='HTML'>sdfssd</Tabs.Panel>
          <Tabs.Panel fromHeader='CSS'>fdsasdf</Tabs.Panel>
          <Tabs.Panel fromHeader='React'>asdfasdf</Tabs.Panel>
          <Tabs.Panel fromHeader='Angular'>Angular</Tabs.Panel>
        </Tabs>
      </Box1>
      <Box2 id='section-2' />
      <Box3 id='section-3' />
    </React.Fragment>
  ));