'use client';

import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import type { BasicInfo, DocumentType } from './types';
import { DOCUMENT_TYPE_OPTIONS } from './types';

interface BasicInfoSectionProps {
  data: BasicInfo;
  onChange: (data: BasicInfo) => void;
}

export function BasicInfoSection({ data, onChange }: BasicInfoSectionProps) {
  return (
    <div className="bg-white rounded-lg border p-6">
      <h3 className="text-lg font-semibold mb-4">기본 정보</h3>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {/* 기안자 */}
        <div className="space-y-2">
          <Label htmlFor="drafter">기안자</Label>
          <Input
            id="drafter"
            value={data.drafter}
            disabled
            className="bg-gray-50"
          />
        </div>

        {/* 작성일 */}
        <div className="space-y-2">
          <Label htmlFor="draftDate">작성일</Label>
          <Input
            id="draftDate"
            value={data.draftDate}
            disabled
            className="bg-gray-50"
          />
        </div>

        {/* 문서번호 */}
        <div className="space-y-2">
          <Label htmlFor="documentNo">문서번호</Label>
          <Input
            id="documentNo"
            placeholder="문서번호를 입력해주세요"
            value={data.documentNo}
            onChange={(e) => onChange({ ...data, documentNo: e.target.value })}
          />
        </div>

        {/* 문서유형 */}
        <div className="space-y-2">
          <Label htmlFor="documentType">문서유형</Label>
          <Select
            value={data.documentType}
            onValueChange={(value) => onChange({ ...data, documentType: value as DocumentType })}
          >
            <SelectTrigger>
              <SelectValue placeholder="문서유형 선택" />
            </SelectTrigger>
            <SelectContent>
              {DOCUMENT_TYPE_OPTIONS.map((option) => (
                <SelectItem key={option.value} value={option.value}>
                  {option.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </div>
    </div>
  );
}