'use client';

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

interface ConstructionDetailCardProps {
  formData: OrderDetailFormData;
  isViewMode: boolean;
  onFieldChange: (field: keyof OrderDetailFormData, value: string) => void;
}

export function ConstructionDetailCard({
  formData,
  isViewMode,
  onFieldChange,
}: ConstructionDetailCardProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-lg">시공 상세</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {/* 작업반장 */}
          <div className="space-y-2">
            <Label>작업반장</Label>
            <Select
              value={formData.workTeamLeader}
              onValueChange={(value) => onFieldChange('workTeamLeader', value)}
              disabled={isViewMode}
            >
              <SelectTrigger>
                <SelectValue placeholder="선택" />
              </SelectTrigger>
              <SelectContent>
                {MOCK_WORK_TEAM_LEADERS.map((option) => (
                  <SelectItem key={option.value} value={option.label}>
                    {option.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          {/* 시공투입일 ~ 시공완료일 */}
          <div className="space-y-2">
            <Label>
              시공투입일<span className="text-destructive ml-1">*</span>
              <span className="mx-2">~</span>
              시공완료일
            </Label>
            <div className="flex items-center gap-2">
              <DatePicker
                value={formData.constructionStartDate}
                onChange={(date) => onFieldChange('constructionStartDate', date)}
                disabled={isViewMode}
                className="flex-1"
              />
              <span className="text-muted-foreground">~</span>
              <DatePicker
                value={formData.constructionEndDate}
                onChange={(date) => onFieldChange('constructionEndDate', date)}
                disabled={isViewMode}
                className="flex-1"
              />
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}