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

import { Box } from './Box';

storiesOf('Components/Atoms/Box', module)
  .add('Default', () => <Box shadow={5} bg="green.500" size={100} />)
  .add('Composition', () => (
    <Box bg="white" p="md" flexDirection="row">
      <Box mr="xxl" rounded="md" p="md" bg="grey.700">
        <Box bg="red.300" size={30} rounded="full" />
        <Box bg="yellow.300" size={30} my="sm" rounded="full" />
        <Box bg="green.300" size={30} rounded="full" />
      </Box>

      <Box m="auto" flexDirection="row" alignItems="center">
        <Box
          bg="purple.300"
          size={30}
          border="lg"
          borderColor="pink.100"
          roundedTopLeft="full"
        />
        <Box
          bg="blue.300"
          border="md"
          borderColor="black"
          roundedRight="lg"
          size={25}
          ml="md"
        />
      </Box>

      <Box
        position="absolute"
        bg="deeporange.500"
        right={5}
        bottom={5}
        size={20}
        opacity={0.6}
      />
    </Box>
  ));