import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
  title: 'Actions/Button',
  component: Button,
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'tertiary', 'danger'],
    },
    size: {
      control: 'select',
      options: ['small', 'medium'],
    },
    loading: {
      control: 'boolean',
    },
    disabled: {
      control: 'boolean',
    },
  },
};

export default meta;
type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  args: {
    variant: 'primary',
    children: 'Купить',
  },
};

export const Secondary: Story = {
  args: {
    variant: 'secondary',
    children: 'Отмена',
  },
};

export const Tertiary: Story = {
  args: {
    variant: 'tertiary',
    children: 'Подробнее',
  },
};

export const Danger: Story = {
  args: {
    variant: 'danger',
    children: 'Удалить портфель',
  },
};

export const Small: Story = {
  args: {
    size: 'small',
    children: 'Применить',
  },
};

export const Loading: Story = {
  args: {
    loading: true,
    children: 'Отправка...',
  },
};

export const Disabled: Story = {
  args: {
    disabled: true,
    children: 'Недоступно',
  },
};

export const AllVariants: Story = {
  render: () => (
    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
      <Button variant="primary">Купить</Button>
      <Button variant="secondary">Отмена</Button>
      <Button variant="tertiary">Подробнее</Button>
      <Button variant="danger">Удалить</Button>
    </div>
  ),
};

export const AllSizes: Story = {
  render: () => (
    <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
      <Button size="small">Маленькая</Button>
      <Button size="medium">Средняя</Button>
    </div>
  ),
};

export const AllStates: Story = {
  render: () => (
    <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
      <Button>Обычная</Button>
      <Button loading>Загрузка</Button>
      <Button disabled>Блокирована</Button>
    </div>
  ),
};