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

const meta: Meta<typeof Button> = {
  component: Button,
  title: 'Button',
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'radio',
      options: ['primary', 'secondary', 'outline', 'ghost', 'danger'],
    },
    size: {
      control: 'radio',
      options: ['sm', 'md', 'lg'],
    },
    isLoading: {
      control: 'boolean',
    },
  },
}

export default meta
type Story = StoryObj<typeof Button>

export const Primary: Story = {
  args: {
    children: '저장',
    variant: 'primary',
    size: 'md',
  },
}

export const Secondary: Story = {
  args: {
    children: '취소',
    variant: 'secondary',
    size: 'md',
  },
}

export const Outline: Story = {
  args: {
    children: '필터',
    variant: 'outline',
    size: 'md',
  },
}

export const Ghost: Story = {
  args: {
    children: '더 보기',
    variant: 'ghost',
    size: 'md',
  },
}

export const Danger: Story = {
  args: {
    children: '삭제',
    variant: 'danger',
    size: 'md',
  },
}

export const Small: Story = {
  args: {
    children: '취소',
    variant: 'primary',
    size: 'sm',
  },
}

export const Large: Story = {
  args: {
    children: '새 도구 추가',
    variant: 'primary',
    size: 'lg',
  },
}

export const WithIcon: Story = {
  args: {
    children: '새 도구 추가',
    variant: 'primary',
    size: 'md',
    leftIcon: 'add',
  },
}

export const Loading: Story = {
  args: {
    children: '처리 중...',
    variant: 'primary',
    size: 'md',
    isLoading: true,
  },
}

export const Disabled: Story = {
  args: {
    children: '비활성화',
    variant: 'primary',
    size: 'md',
    disabled: true,
  },
}

export const IconOnly: Story = {
  args: {
    children: undefined,
    variant: 'primary',
    size: 'md',
    leftIcon: 'add',
  },
}