// @flow
import React from 'react';
import { action } from '@storybook/addon-actions';
import { TextButtonWithIcon } from './text-button-with-icon.component';
import type { TextButtonWithIconProps } from './text-button-with-icon.proptypes';
import { MarginChecker } from '../../../mixins/spacing/story-support/margin-checker';
import { PaddingChecker } from '../../../mixins/spacing/story-support/padding-checker';
import docs from './text-button-with-icon.mdx';

export default {
  component: TextButtonWithIcon,
  title: 'Components/Actions/Text Button With Icon',
  parameters: {
    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 RightIconWithOnClick = () => (
  <TextButtonWithIcon
    onClick={action('onClick')}
    icon="small-arrow-right"
    position="right"
  >
    Icon To Right
  </TextButtonWithIcon>
);

export const MixinsSpacing = () => (
  <>
    <MarginChecker Component={TextButtonWithIcon} {...DEFAULT_PROPS}>
      Click me
    </MarginChecker>
    <PaddingChecker Component={TextButtonWithIcon} {...DEFAULT_PROPS}>
      Click me
    </PaddingChecker>
  </>
);
