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

const meta = {
  title: 'Components/Section',
  component: Section,
  args: {
    variant: 'base',
    children: <div>Base 섹션</div>,
  },
  argTypes: {
    variant: {
      control: 'select',
      options: ['base', 'card', 'list', 'searchFilterGray'],
    },
  },
} satisfies Meta<typeof Section>

export default meta
type Story = StoryObj<typeof meta>

export const Base: Story = {
  args: {
    variant: 'base',
    children: (
      <div>
        <h2 className="text-lg font-bold mb-2">기본 섹션</h2>
        <p>이것은 기본 섹션입니다.</p>
      </div>
    ),
  },
}

export const Card: Story = {
  args: {
    variant: 'card',
    children: (
      <div>
        <h2 className="text-lg font-bold mb-2">카드 섹션</h2>
        <p>이것은 카드 형태의 섹션입니다.</p>
      </div>
    ),
  },
}

export const List: Story = {
  args: {
    variant: 'list',
    children: (
      <>
        <h2 className="text-lg font-bold">리스트 섹션</h2>
        <ul className="space-y-2">
          <li className="p-2 bg-gray-50 rounded">항목 1</li>
          <li className="p-2 bg-gray-50 rounded">항목 2</li>
          <li className="p-2 bg-gray-50 rounded">항목 3</li>
        </ul>
      </>
    ),
  },
}

export const SearchFilterGray: Story = {
  args: {
    variant: 'searchFilterGray',
    children: (
      <>
        <span>필터:</span>
        <select className="border border-gray-300 rounded px-2 py-1">
          <option>전체</option>
          <option>옵션 1</option>
          <option>옵션 2</option>
        </select>
        <input type="text" placeholder="검색어 입력" className="border border-gray-300 rounded px-2 py-1" />
      </>
    ),
  },
}

export const AllVariants: Story = {
  render: () => (
    <div className="space-y-4">
      <Section variant="base">
        <div>Base 섹션</div>
      </Section>
      <Section variant="card">
        <div>Card 섹션</div>
      </Section>
      <Section variant="list">
        <div>List 섹션</div>
      </Section>
      <Section variant="searchFilterGray">
        <span>SearchFilterGray 섹션</span>
      </Section>
    </div>
  ),
}