import InputField from "./InputField";
import PlaceAutocomplete from "../components/PlaceAutocomplete";
import { useLanguage } from "@/app/context/LanguageContext";

interface Props {
  register: any;
  errors: any;
  watch: any;
  setValue: any;
  prevStep: () => void;
  loading: boolean;
}

export default function StepThree({
  register,
  errors,
  watch,
  setValue,
  prevStep,
  loading,
}: Props) {
  const { t } = useLanguage();
  return (
    <>
      <InputField
        label={t("auth.registerStepThree.birthDateLabel", "Date of Birth")}
        name="birthDate"
        type="date"
        register={register}
        rules={{
          required: t("auth.registerStepThree.birthDateRequired", "Date of Birth is required"),
        }}
        error={errors.birthDate}
      />

      <InputField
        label={t("auth.registerStepThree.birthTimeLabel", "Birth Time")}
        name="birthTime"
        type="time"
        register={register}
        rules={{
          required: t("auth.registerStepThree.birthTimeRequired", "Birth Time is required"),
        }}
        error={errors.birthTime}
      />

      <PlaceAutocomplete
        label={t("auth.registerStepThree.birthPlaceLabel", "Birth Place")}
        placeholder={t("auth.registerStepThree.birthPlacePlaceholder", "Search Birth Place")}
        value={watch("birthPlace")}
        onChange={(value) =>
          setValue("birthPlace", value, {
            shouldValidate: true,
            shouldDirty: true,
            shouldTouch: true,
          })
        }
        error={errors.birthPlace}
      />

      <div className="birth-info-note">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="10" cy="10" r="9" stroke="#ff7a45" strokeWidth="1.5" />
          <rect x="9.1" y="8.3" width="1.8" height="6" rx="0.9" fill="#ff7a45" />
          <rect x="9.1" y="5.3" width="1.8" height="1.8" rx="0.9" fill="#ff7a45" />
        </svg>

        <p>
          {t("auth.registerStepThree.birthInfoNote", "Your exact birth time and location help us calculate your Rising Sign and planetary positions for more accurate horoscope predictions.")}
        </p>
      </div>

      <div className="mt-4 d-flex gap-3">
        <button
          type="button"
          className="btn btn-outline-light py-3 w-50 d-flex gap-2 justify-content-center align-items-center"
          onClick={prevStep}
          disabled={loading}
        >
          <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M2.8731 8.24994H15V6.74998H2.8731L8.56924 1.05382L7.50004 0L0.0001 7.49996L7.50004 14.9999L8.56924 13.9461L2.8731 8.24994Z" fill="#fff"/>
          </svg>
          {t("auth.registerStepThree.back", "Back")}
        </button>

        <button
          type="submit"
          className="btn btn-primary py-3 w-50"
          disabled={loading}
        >
          {loading ? t("auth.registerStepThree.creating", "Creating...") : t("auth.registerStepThree.createAccount", "Create Account")}
        </button>
      </div>
    </>
  );
}