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

interface PropertyInfoCardProps {
  values: any;
  onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void;
}

const PropertyInfoCard = ({ values, onChange }: PropertyInfoCardProps) => {
  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="type"
          name="type"
          label="نوع الطلب"
          required
          type="select"
          placeholder="نوع الطلب"
          inputClassName="text-sm md:text-sm"
          value={values.type}
          onChange={onChange}
          options={[
            { label: "سكني", value: "residential" },
            { label: "تجاري", value: "commercial" },
          ]}
        />
        <Field
          id="propertyType"
          name="property_type"
          label="نوع العقار"
          required
          type="select"
          placeholder="نوع العقار"
          inputClassName="text-sm md:text-sm"
          value={values.property_type}
          onChange={onChange}
          options={[
            { label: "شقة", value: "apartment" },
            { label: "فيلا", value: "villa" },
            { label: "دور", value: "floor" },
            { label: "محل", value: "shop" },
          ]}
        />
        <Field
          id="property_rooms"
          name="property_rooms"
          label="عدد غرف النوم"
          required
          type="number"
          formatThousands={false}
          placeholder="عدد غرف النوم"
          inputClassName="text-sm md:text-sm"
          value={values.property_rooms}
          onChange={onChange}
        />
        <Field
          id="property_floors"
          name="property_floors"
          label="عدد الأدوار"
          required
          type="number"
          formatThousands={false}
          placeholder="عدد الأدوار"
          inputClassName="text-sm md:text-sm"
          value={values.property_floors}
          onChange={onChange}
        />
        <Field
          className="md:col-span-2"
          id="property_address"
          name="property_address"
          label="عنوان العقار"
          required
          type="text"
          placeholder="عنوان العقار (المدينة، الحي، الشارع)"
          inputClassName="text-sm md:text-sm"
          value={values.property_address}
          onChange={onChange}
        />
        <Field
          id="payment_cycle"
          name="payment_cycle"
          label="نوع عقد الإيجار"
          required
          type="select"
          placeholder="نوع عقد الإيجار"
          value={values.payment_cycle}
          onChange={onChange}
          options={[
            { label: "سنوي", value: "yearly" },
            { label: "نصف سنوي", value: "semi_yearly" },
            { label: "ربع سنوي", value: "quarterly" },
            { label: "شهري", value: "monthly" },
          ]}
        />
        <Field
          id="contract_duration"
          name="contract_duration"
          label="مدة العقد"
          required
          type="text"
          placeholder="مدة العقد"
          value={values.contract_duration}
          onChange={onChange}
        />
        <Field
          id="electricity_meter"
          name="electricity_meter"
          label="رقم عداد الكهرباء"
          required
          type="text"
          placeholder="رقم عداد الكهرباء"
          value={values.electricity_meter}
          onChange={onChange}
        />
        <Field
          id="water_meter"
          name="water_meter"
          label="رقم عداد المياة"
          required
          type="text"
          placeholder="رقم عداد المياة"
          value={values.water_meter}
          onChange={onChange}
        />
        <Field
          id="rent_amount"
          name="rent_amount"
          label="سعر الإيجار"
          icon={(
            <svg width="14" height="14" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clipPath="url(#clip0_4232_4947)">
                <path d="M17.3804 15.2793C17.2981 15.6181 17.1852 15.9469 17.0425 16.2627L11.2056 17.373C11.2879 17.0344 11.4007 16.7054 11.5435 16.3896L17.3804 15.2793Z" fill="#62748E" stroke="#62748E" />
                <path d="M17.3851 12.8339C17.7063 12.1968 17.9187 11.5051 18 10.7799L12.7051 11.7875V9.85051L17.385 8.96067C17.7062 8.32356 17.9185 7.63187 17.9998 6.90664L12.7049 7.91339V0.947429C11.8936 1.35503 11.173 1.89758 10.5873 2.53756V8.31625L8.46967 8.71898V0C7.65833 0.407453 6.93778 0.950151 6.35206 1.59013V9.12156L1.61387 10.0224C1.29267 10.6595 1.08019 11.3512 0.998683 12.0765L6.35206 11.0585V13.4978L0.61487 14.5887C0.293664 15.2258 0.0813422 15.9175 0 16.6427L6.00523 15.5008C6.49408 15.4099 6.91425 15.1513 7.18741 14.7954L8.28874 13.3345V13.3342C8.40306 13.1831 8.46967 13.0008 8.46967 12.8045V10.6558L10.5873 10.2531V14.127L17.385 12.8336L17.3851 12.8339Z" fill="#62748E" />
              </g>
              <defs>
                <clipPath id="clip0_4232_4947">
                  <rect width="18" height="18" fill="white" />
                </clipPath>
              </defs>
            </svg>
          )}
          required
          type="number"
          placeholder="سعر الإيجار"
          value={values.rent_amount}
          onChange={onChange}
        />
        <Field
          id="rent_start_date"
          name="rent_start_date"
          label="تاريخ بداية الايجار"
          required
          type="date"
          placeholder="تاريخ بداية الايجار"
          value={values.rent_start_date}
          onChange={onChange}
        />
        <Field
          className="md:col-span-2"
          id="extra_terms"
          name="extra_terms"
          required
          type="textarea"
          placeholder="اضف تفاصيل اضافية"
          value={values.extra_terms}
          onChange={onChange}
        />
      </div>
    </div>
  );
}

export default PropertyInfoCard;