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

import { StoryScreen, Story, UseCase } from '~/storybook/views';
import { color } from '~/theme';

import { BulletItem } from './bullet-item';

declare let module;

storiesOf('BulletItem', module)
  .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
  .add('Default', () => (
    <Story>
      <UseCase text="Default" usage="The default bullet item.">
        <BulletItem text="Lorem ipsum" />
      </UseCase>
      <UseCase text="With color" usage="With a colored bullet item.">
        <BulletItem color={color.active} text="Lorem ipsum" />
      </UseCase>
    </Story>
  ));
