'use client';

import { Input } from '@/components/ui/input';
import { DatePicker } from '@/components/ui/date-picker';
import { Label } from '@/components/ui/label';
import { CurrencyInput } from '@/components/ui/currency-input';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import type { SectionProps } from './types';

export function BuybackSection({ formData, updateField, isViewMode }: SectionProps) {
  return (
    <Card className="mb-6 border-orange-200 bg-orange-50/30">
      <CardHeader>
        <CardTitle className="text-lg text-orange-700">환매 정보</CardTitle>
      </CardHeader>
      <CardContent>
        <p className="text-xs text-muted-foreground mb-4">할인한 어음이 부도나 금융기관이 할인 의뢰인에게 어음금액을 청구(환매)한 경우</p>
        <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.buybackDate} onChange={(d) => updateField('buybackDate', d)} disabled={isViewMode} />
          </div>
          <div className="space-y-2">
            <Label>환매금액 <span className="text-red-500">*</span></Label>
            <CurrencyInput value={formData.buybackAmount} onChange={(v) => updateField('buybackAmount', v ?? 0)} disabled={isViewMode} />
          </div>
          <div className="space-y-2">
            <Label>환매요청 은행</Label>
            <Input value={formData.buybackBank} onChange={(e) => updateField('buybackBank', e.target.value)} placeholder="환매 청구 금융기관" disabled={isViewMode} />
          </div>
        </div>
      </CardContent>
    </Card>
  );
}