import { Meta, StoryObj } from '@storybook/react';
import { Settings } from '@transferwise/icons';

import { storyConfig } from '../test-utils/story-config';

import ActionButton from './ActionButton';

export default {
  component: ActionButton,
  title: 'Actions/ActionButton',
  tags: ['autodocs'],
} satisfies Meta<typeof ActionButton>;

type Story = StoryObj<typeof ActionButton>;

export const Basic: Story = storyConfig(
  {
    render: (args) => (
      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem' }}>
        <div>
          <ActionButton priority="primary" {...args}>
            Primary label
          </ActionButton>
          <ActionButton priority="secondary" {...args}>
            Secondary label
          </ActionButton>
          <ActionButton priority="tertiary" {...args}>
            Tertiary label
          </ActionButton>
        </div>
        <div>
          <ActionButton priority="primary" {...args}>
            <Settings />
            Primary label
          </ActionButton>
          <ActionButton priority="secondary" {...args}>
            <Settings />
            Secondary label
          </ActionButton>
          <ActionButton priority="tertiary" {...args}>
            <Settings />
            Tertiary label
          </ActionButton>
        </div>
      </div>
    ),
  },
  {
    variants: ['default', 'dark', 'rtl', 'mobile'],
  },
);

export const Disabled: Story = storyConfig(
  {
    render: Basic.render,
    args: {
      disabled: true,
    },
  },
  {
    variants: ['default', 'dark', 'rtl', 'mobile'],
  },
);
