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

import ActionButton from './ActionButton';
import { withVariantConfig } from '../../.storybook/helpers';

/**
 * This component is deprecated please use new [Button](?path=/docs/actions-button--docs).
 *
 * For more details please refer to the [release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3542158737/Button+Updates+New+sizes+Loader+and+Cue) and the [design spec](https://wise.design/components/button).
 */
export default {
  component: ActionButton,
  title: 'Actions/ActionButton',
  tags: ['deprecated'],
} satisfies Meta<typeof ActionButton>;

type Story = StoryObj<typeof ActionButton>;

export const Basic: Story = {
  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>
        <ActionButton priority="primary" {...args} disabled>
          Primary disabled
        </ActionButton>
        <ActionButton priority="secondary" {...args} disabled>
          Secondary disabled
        </ActionButton>
        <ActionButton priority="tertiary" {...args} disabled>
          Tertiary disabled
        </ActionButton>
      </div>
    </div>
  ),
  ...withVariantConfig(['default', 'dark', 'rtl', 'mobile']),
};