'use client';

import { Input } from '@/components/ui/input';
import { DatePicker } from '@/components/ui/date-picker';
import { Label } from '@/components/ui/label';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import {
  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
} from '@/components/ui/select';
import type { SectionProps } from './types';

export function EndorsementSection({ formData, updateField, isViewMode }: SectionProps) {
  return (
    <Card className="mb-6 border-purple-200">
      <CardHeader>
        <CardTitle className="text-lg">배서양도 정보</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="space-y-2">
            <Label>배서일자 <span className="text-red-500">*</span></Label>
            <DatePicker value={formData.endorsementDate} onChange={(d) => updateField('endorsementDate', d)} disabled={isViewMode} />
          </div>
          <div className="space-y-2">
            <Label>피배서인 (양수인) <span className="text-red-500">*</span></Label>
            <Input value={formData.endorsee} onChange={(e) => updateField('endorsee', e.target.value)} placeholder="어음을 넘겨받는 자" disabled={isViewMode} />
          </div>
          <div className="space-y-2">
            <Label>배서 사유</Label>
            <Select value={formData.endorsementReason} onValueChange={(v) => updateField('endorsementReason', v)} disabled={isViewMode}>
              <SelectTrigger><SelectValue placeholder="선택" /></SelectTrigger>
              <SelectContent>
                <SelectItem value="payment">대금결제</SelectItem>
                <SelectItem value="guarantee">담보제공</SelectItem>
                <SelectItem value="collection">추심위임</SelectItem>
                <SelectItem value="other">기타</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
