import { type Meta, type StoryObj } from '@storybook/react-vite';
import { IconInfoCircle } from '@tabler/icons-react';

import Button from '.';

const meta: Meta<typeof Button> = {
  title: 'Design System/Buttons/Button',
  component: Button,
  tags: ['autodocs'],
  args: {
    children: 'Button',
    disabled: false,
  },
  argTypes: {
    variant: {
      control: 'radio',
      options: [
        'primary',
        'secondary',
        'tertiary',
        'tertiary-filled',
        'success',
        'error',
      ],
      table: {
        defaultValue: { summary: 'tertiary' },
      },
    },
    size: {
      control: 'radio',
      options: ['small', 'large'],
      table: {
        defaultValue: { summary: 'large' },
      },
    },
    startIcon: {
      table: {
        type: { summary: 'ReactNode' },
      },
    },
    endIcon: {
      table: {
        type: { summary: 'ReactNode' },
      },
    },
    loading: {
      control: 'boolean',
      description: 'Shows loading spinner',
    },
  },
};

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: {},
};

export const Icons: Story = {
  args: {
    startIcon: <IconInfoCircle />,
    endIcon: <IconInfoCircle />,
    variant: 'primary',
  },
};

export const Loading: Story = {
  args: {
    loading: true,
    variant: 'primary',
    children: 'Loading...',
  },
};

export const DisabledPrimary: Story = {
  args: {
    disabled: true,
    variant: 'primary',
    children: 'Disabled',
  },
};

export const DisabledSecondary: Story = {
  args: {
    disabled: true,
    variant: 'secondary',
    children: 'Disabled',
  },
};

export const DisabledTertiary: Story = {
  args: {
    disabled: true,
    variant: 'tertiary',
    children: 'Disabled',
  },
};

export const DisabledTertiaryFilled: Story = {
  args: {
    disabled: true,
    variant: 'tertiary-filled',
    children: 'Disabled',
  },
};

export const DisabledSuccess: Story = {
  args: {
    disabled: true,
    variant: 'success',
    children: 'Disabled',
  },
};

export const DisabledError: Story = {
  args: {
    disabled: true,
    variant: 'error',
    children: 'Disabled',
  },
};