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

import { StoryScreen, Story, UseCase } from '~/storybook/views';
import { png as images } from '~/theme';

import { Image } from './image';

declare let module;

storiesOf('Image', module)
  .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
  .add('Style Presets', () => (
    <Story>
      <UseCase text="Default" usage="Default case">
        <Image size={200} source={images.paackBlue} />
      </UseCase>
      <UseCase text="Circular" usage="Circular case">
        <Image circular size={200} source={images.paackBlue} />
      </UseCase>
      <UseCase text="Bordered" usage="Bordered case">
        <Image bordered size={200} source={images.paackBlue} />
      </UseCase>
      <UseCase text="Circular + Bordered" usage="Bordered+circular case">
        <Image bordered circular size={200} source={images.paackBlue} />
      </UseCase>
    </Story>
  ));
