import { Control, FieldErrors } from "react-hook-form";
import FormInput from "@/src/components/form/FormInput";
import FormRadio from "@/src/components/form/FormRadio";
import { RMApplicationFormData } from "../schema";
import FormSection from "@/src/components/form/FormSection";

interface Step4Props {
  control: Control<RMApplicationFormData>;
  errors: FieldErrors<RMApplicationFormData>;
  isReadOnly: boolean;
}

export default function Step4({ control, errors, isReadOnly }: Step4Props) {
  const urgencyOptions = [
    { label: "Yes", value: "yes" },
    { label: "No", value: "no" },
  ];

  return (
    <div className="space-y-6">
      <FormSection title="Urgency & Timing" >
      <FormInput
        name="issueStartTime"
        control={control}
        label="When did this issue start?"
        placeholder="e.g., 3 days ago, last week, this morning..."
        required
        disabled={isReadOnly}
        error={errors.issueStartTime}
      />
      
      <div className="mt-4"></div>

      <FormRadio
        name="isUrgent"
        control={control}
        label="Is this an urgent issue?"
        options={urgencyOptions}
        required
        disabled={isReadOnly}
        error={errors.isUrgent}
      />
      </FormSection>
    </div>
  );
}