import { action } from '@storybook/addon-actions';
import { Meta, StoryObj } from '@storybook/react';
import { FastFlag as FastFlagIcon } from '@transferwise/icons';

import { Nudge, Title, Typography } from '..';

import ActionOption from './ActionOption';

export default {
  component: ActionOption,
  title: 'Option/ActionOption',
  args: {
    title: 'Action option',
    content: 'Normally, the button and icon are vertically centered.',
    action: 'Action',
    media: <FastFlagIcon />,
    showMediaCircle: false,
  },
  tags: ['autodocs'],
} satisfies Meta<typeof ActionOption>;

type Story = StoryObj<typeof ActionOption>;

export const Basic: Story = {
  render: (args) => <ActionOption {...args} />,
};

export const WithSecondaryPriority: Story = {
  render: (args) => <ActionOption priority="secondary" {...args} />,
};

export const WithTertiaryPriority: Story = {
  render: (args) => <ActionOption priority="tertiary" {...args} />,
};

export const WithContainerContent: Story = {
  render: (args) => (
    <>
      <Title type={Typography.TITLE_SUBSECTION} className="m-b-1">
        Choose how to pay
      </Title>
      <ActionOption {...args} />
      <ActionOption {...args} />
      <ActionOption {...args} />
      <div>
        <Nudge
          className="m-t-2"
          mediaName="globe"
          title="Text that is no longer than two lines."
          link="Link"
          href="#"
          onClick={action('action clicked')}
          onDismiss={action('dismissed')}
        />
      </div>
    </>
  ),
};
