import type { Meta, Story } from '@storybook/react'
import { Button, ButtonProps } from '../../../react/src/components/Button';
import { ArrowRight, PlusCircle } from 'phosphor-react'

export default {
  title: 'Components/Buttons',
  component: Button,
  argTypes: {
    label: {
      description: 'The label for the button',
      control: {
        type: 'text',
      },
    },
    variant: {
      description: 'The visual style of the button',
      options: ['primary', 'secondary', 'tertiary'],
      control: {
        type: 'radio',
      },
    },
    size: {
      description: 'The size of the button',
      options: ['sm', 'md'],
      control: {
        type: 'inline-radio',
      },
    },
    disabled: {
      description: 'Disables the button from user interaction',
      control: {
        type: 'boolean',
      },
    },
  },
} as Meta<ButtonProps>

export const Primary: Story<ButtonProps> = args => <Button {...args}>Submit</Button>
Primary.args = {
  variant: 'primary',
  size: 'md',
  disabled: false,
  description: 'The default primary button',
}

export const Cancel: Story<ButtonProps> = args => <Button {...args}>Cancel</Button>
Cancel.args = {
  variant: 'secondary',
  size: 'md',
  disabled: false,
  description: 'A secondary button used for canceling actions',
}

export const Delete: Story<ButtonProps> = args => <Button {...args}>Delete</Button>
Delete.args = {
  variant: 'tertiary',
  size: 'md',
  disabled: false,
  description: 'A tertiary button used for deleting items',
}

export const Small: Story<ButtonProps> = args => <Button {...args}>Submit</Button>
Small.args = {
  variant: 'primary',
  size: 'sm',
  disabled: false,
  description: 'A smaller version of the default primary button',
}

export const WithIcon: Story<ButtonProps> = args => (
  <Button {...args}>
    {/* <ArrowRight weight="bold" /> */}
    <PlusCircle weight="bold" size={100} />
    Submit
  </Button>
)
WithIcon.args = {
  variant: 'primary',
  size: 'md',
  disabled: false,
  description: 'The default primary button with an arrow icon',
}

export const WithIconLeft: Story<ButtonProps> = args => (
  <Button {...args}>
    Submit <ArrowRight weight="bold" size="9xl" />
  </Button>
)
WithIconLeft.args = {
  variant: 'primary',
  size: 'md',
  disabled: false,
  description: 'The default primary button with an arrow icon on the left',
}

export const Disabled: Story<ButtonProps> = args => <Button {...args}>Disabled</Button>
Disabled.args = {
  variant: 'primary',
  size: 'md',
  disabled: true,
  description: 'The default primary button in a disabled state',
}