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

import { Icon } from './Icon';

storiesOf('Components/Atoms/Icon', module)
  .add('Default', () => <Icon name="account-circle" />)
  .add('Theme colors', () => (
    <>
      <Icon name="atom" size="3xl" color="amber.900" />
      <Icon name="atom" size="3xl" color="teal.800" />
      <Icon name="atom" size="3xl" color="blue.300" />
      <Icon name="atom" size="3xl" color="brown.600" />
      <Icon name="atom" size="3xl" color="pink.500" />
    </>
  ))
  .add('Theme sizes', () => (
    <>
      <Icon name="rocket" size="5xl" color="bluegrey.700" />
      <Icon name="rocket" size="4xl" color="bluegrey.700" />
      <Icon name="rocket" size="3xl" color="bluegrey.700" />
      <Icon name="rocket" size="xxl" color="bluegrey.700" />
      <Icon name="rocket" size="xl" color="bluegrey.700" />
    </>
  ));