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

const meta = {
  title: 'Components/Descriptions',
  component: Descriptions,
  argTypes: {
    column: {
      control: 'select',
      options: [1, 2, 3, 4],
    },
  },
} satisfies Meta<typeof Descriptions>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {
    items: [
      { title: '이름', content: '홍길동' },
      { title: '이메일', content: 'hong@example.com' },
      { title: '전화번호', content: '010-1234-5678' },
    ],
  },
}

export const TwoColumns: Story = {
  args: {
    column: 2,
    items: [
      { title: '이름', content: '홍길동' },
      { title: '이메일', content: 'hong@example.com' },
      { title: '전화번호', content: '010-1234-5678' },
      { title: '주소', content: '서울특별시 강남구' },
    ],
  },
}

export const ThreeColumns: Story = {
  args: {
    column: 3,
    items: [
      { title: '이름', content: '홍길동' },
      { title: '이메일', content: 'hong@example.com' },
      { title: '전화번호', content: '010-1234-5678' },
      { title: '주소', content: '서울특별시 강남구' },
      { title: '부서', content: '개발팀' },
      { title: '직급', content: '선임연구원' },
    ],
  },
}

export const FourColumns: Story = {
  args: {
    column: 4,
    items: [
      { title: '이름', content: '홍길동' },
      { title: '이메일', content: 'hong@example.com' },
      { title: '전화번호', content: '010-1234-5678' },
      { title: '주소', content: '서울특별시 강남구' },
    ],
  },
}

export const WithSpan: Story = {
  args: {
    column: 2,
    items: [
      { title: '이름', content: '홍길동' },
      { title: '이메일', content: 'hong@example.com' },
      { title: '주소', content: '서울특별시 강남구 역삼동 123-456', span: 'filled' },
    ],
  },
}

export const WithCustomTitleWidth: Story = {
  args: {
    column: 2,
    titleWidth: 150,
    items: [
      { title: '사용자 이름', content: '홍길동' },
      { title: '이메일 주소', content: 'hong@example.com' },
      { title: '휴대전화 번호', content: '010-1234-5678' },
      { title: '거주지 주소', content: '서울특별시 강남구' },
    ],
  },
}