// @flow
import React from 'react';
import { TextButtonWithIcon } from './text-button-with-icon.component';
import type { TextButtonWithIconProps } from './text-button-with-icon.proptypes';
import docs from './text-button-with-icon.mdx';

export default {
  component: TextButtonWithIcon,
  title: 'Text Button With Icon',
  parameters: {
    fileName: __filename,
    docs: {
      page: docs,
    },
  },
};

const DEFAULT_PROPS: TextButtonWithIconProps = {
  href: 'https://www.google.com',
  icon: 'add',
  position: 'left',
};

export const LeftIcon = () => (
  <TextButtonWithIcon {...DEFAULT_PROPS} icon="add" position="left">
    Icon To Left
  </TextButtonWithIcon>
);

export const RightIcon = () => (
  <TextButtonWithIcon
    {...DEFAULT_PROPS}
    icon="small-arrow-right"
    position="right"
  >
    Icon To Right
  </TextButtonWithIcon>
);

export const UnknownIcon = () => (
  <TextButtonWithIcon
    {...DEFAULT_PROPS}
    // $FlowFixMe - testing runtime behaviour with bogus icon value.
    icon="schroedingersicon"
    position="right"
  >
    Unknown Icon
  </TextButtonWithIcon>
);
