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

const meta = {
  title: 'Components/InputGroup',
  component: InputGroup,
  argTypes: {
    isReadOnly: { control: 'boolean' },
  },
} satisfies Meta<typeof InputGroup>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (args) => (
    <InputGroup {...args}>
      <Input placeholder="입력해주세요" />
    </InputGroup>
  ),
}

export const WithValue: Story = {
  render: (args) => (
    <InputGroup {...args}>
      <Input defaultValue="입력된 값" />
    </InputGroup>
  ),
}

export const Disabled: Story = {
  render: () => (
    <InputGroup>
      <Input placeholder="비활성화" disabled />
    </InputGroup>
  ),
}

export const ReadOnly: Story = {
  args: {
    isReadOnly: true,
  },
  render: (args) => (
    <InputGroup {...args}>
      <Input defaultValue="읽기 전용" readOnly />
    </InputGroup>
  ),
}

export const NumberInput: Story = {
  render: () => (
    <InputGroup>
      <Input type="number" placeholder="숫자 입력" />
    </InputGroup>
  ),
}

export const WithPrefix: Story = {
  render: () => (
    <InputGroup>
      <span className="pl-3 text-dabeeo-gray-99">@</span>
      <Input placeholder="사용자명" />
    </InputGroup>
  ),
}

export const WithSuffix: Story = {
  render: () => (
    <InputGroup>
      <Input placeholder="금액" type="number" />
      <span className="pr-3 text-dabeeo-gray-99">원</span>
    </InputGroup>
  ),
}

export const CustomWidth: Story = {
  render: () => (
    <InputGroup className="w-60">
      <Input placeholder="너비 240px" />
    </InputGroup>
  ),
}