import Field from "@/components/ui/Field";
import UploadImage from "./UploadImage";

interface LesseeInfoCardProps {
  values: any;
  onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void;
  onFileChange: (file: File | null) => void;
}

const LesseeInfoCard = ({ values, onChange, onFileChange }: LesseeInfoCardProps) => {
  return (
    <div className="bg-white border border-[#CAD5E2] p-3 rounded-xl">
      <div className="bg-[#E2E8F0] p-4 rounded-md">
        <h4 className="text-lg font-semibold">بيانات المستأجر</h4>
      </div>

      <div className="pt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
        <Field
          id="lessee_id_number"
          name="lessee_id_number"
          label="رقم الهوية"
          required
          type="number"
          formatThousands={false}
          placeholder="اضف رقم الهوية الوطنية/رقم الإقامة"
          value={values.lessee_id_number}
          onChange={onChange}
        />
        <Field
          id="lessee_birthdate"
          name="lessee_birthdate"
          label="تاريخ الميلاد"
          required
          type="date"
          placeholder="تاريخ الميلاد"
          value={values.lessee_birthdate}
          onChange={onChange}
        />
        <Field
          id="lessee_phone"
          name="lessee_phone"
          label="رقم الجوال المسجل فى ابشر"
          required
          type="number"
          formatThousands={false}
          placeholder="اضف رقم الجوال يبدا من 05"
          value={values.lessee_phone}
          onChange={onChange}
        />

        <UploadImage
          className="md:col-span-2"
          title="اختر صورة الهوية الوطنية او صورة الاقامة"
          name="lessee_id_image"
          onChange={onFileChange}
        />
      </div>
    </div>
  );
}

export default LesseeInfoCard;