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

import { Button } from './Button';
import { Icon } from '../../atoms/Icon/Icon';

storiesOf('Components/Molecules/Button', module)
  .add('Default', () => <Button text="Click me" />)
  .add('Full width', () => <Button w="100%" text="Continue" />)
  .add('Disabled', () => <Button text="I am disabled" disabled />)
  .add('Leading icon', () => (
    <Button
      leadingIcon={<Icon name="plus" color="white" />}
      text="Add to cart"
    />
  ))
  .add('Theme colors', () => (
    <>
      <Button text="Colors" bg="amber.500" bgActive="amber.600" />
      <Button my="md" text="Colors" bg="green.600" bgActive="green.700" />
      <Button text="Colors" bg="red.200" bgActive="red.300" />
    </>
  ));