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

import { Icon } from '~/components/icon';
import { Text } from '~/components/text';
import { StoryScreen, Story, UseCase } from '~/storybook/views';
import { color, metrics } from '~/theme';

import { LineBehind } from './line-behind';

storiesOf('LineBehind', module)
  .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
  .add('Default', () => (
    <Story>
      <UseCase text="Text" usage="Around a text component">
        <LineBehind>
          <Text text="Lorem ipsum sit amet" />
        </LineBehind>
      </UseCase>
      <UseCase text="Small text" usage="Around a small text">
        <LineBehind>
          <Text preset="caption" text="Lorem ipsum sit amet" />
        </LineBehind>
      </UseCase>
      <UseCase text="Icon" usage="Around a icon component">
        <LineBehind>
          <Icon name="warning" size={metrics.heroIconSize[0]} />
        </LineBehind>
      </UseCase>
      <UseCase text="Colored" usage="Using another color">
        <LineBehind color={color.palette.mexicanRed}>
          <Text text="Lorem ipsum sit amet" />
        </LineBehind>
      </UseCase>
    </Story>
  ));
