import React from 'react';
import { storiesOf } from '@storybook/react-native';

import { Divider } from './Divider';
import { Box } from '../Box/Box';

storiesOf('Components/Atoms/Divider', module)
  .add('Default', () => (
    <>
      <Box>
        <Box size={150} bg="red.100" />
        <Divider color="grey.500" />
        <Box size={150} bg="blue.100" />
      </Box>
    </>
  ))
  .add('Vertical', () => (
    <>
      <Box flexDirection="row">
        <Box size={150} bg="red.100" />
        <Divider orientation="vertical" color="grey.500" />
        <Box size={150} bg="blue.100" />
      </Box>
    </>
  ))
  .add('Theme colors', () => (
    <>
      <Box shadow={3} bg="white">
        <Box size={100} bg="white" />
        <Divider color="deeporange.500" />
        <Box size={100} bg="white" />
        <Divider color="green.500" />
        <Box size={100} bg="white" />
        <Divider color="indigo.500" />
        <Box size={100} bg="white" />
      </Box>
    </>
  ))
  .add('Custom sizes', () => (
    <>
      <Box shadow={3} bg="white" flexDirection="row">
        <Box size={100} bg="white" />
        <Divider orientation="vertical" />
        <Box size={100} bg="white" />
        <Divider orientation="vertical" size={2} />
        <Box size={100} bg="white" />
        <Divider orientation="vertical" size={3} />
        <Box size={100} bg="white" />
      </Box>
    </>
  ));