// @flow
import React from 'react';
import { action } from '@storybook/addon-actions';
import { TertiaryButton } from './tertiary-button.component';
import type { TertiaryButtonProps } from './tertiary-button.proptypes';
import docs from './tertiary-button.mdx';

export default {
  component: TertiaryButton,
  title: 'Buttons/Tertiary',
  parameters: {
    fileName: __filename,
    docs: {
      page: docs,
    },
  },
};

const DEFAULT_PROPS_CLICK: TertiaryButtonProps = {
  onClick: action('clicked'),
};

const DEFAULT_PROPS_HREF: TertiaryButtonProps = {
  href: 'https://google.com',
};

export const Default = () => (
  <TertiaryButton {...DEFAULT_PROPS_CLICK}>Button Action</TertiaryButton>
);

export const Disabled = () => (
  <TertiaryButton {...DEFAULT_PROPS_CLICK} disabled>
    Button Action
  </TertiaryButton>
);

export const AsLink = () => (
  <TertiaryButton {...DEFAULT_PROPS_HREF}>Button Link</TertiaryButton>
);
