import React from 'react';
import { storiesOf } from '@storybook/react';
import { boolean, array, text, number } from '@storybook/addon-knobs';
import styled from 'styled-components';
import Tabs from './component';

// const Test1 = styled.div``;
// const Test2 = styled.div``;

const props = ({
  isTouchDevice = undefined,
  // titles = ['test1', 'test2'],
  callback = undefined,
} = {}) => ({
  isTouchDevice: boolean('is touch device', isTouchDevice),
  // titles: array('titles', titles),
});

const Test1 = () => (
  <div>Test 1</div>
)

const Test2 = () => (
  <div>Test 2</div>
)

// does not work for some reason
storiesOf('Web|Tabs', module)
  .add('default', () => (
    <Tabs {...props()} titles={['test1', 'test2']}>
      {{
        test1: Test1,
        test2: Test2
      }}
    </Tabs>
  ))
