fixed owner and customer register make reuseable component and completed it

app/components/LoginComponent/OtpComponent.js

@@ -0,0 +1,145 @@
+"use client";
+
+import { CheckCircle, KeyRound, Loader2, Shield } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { motion } from "framer-motion";
+import { sendEmailOTP, sendPhoneOTP, verifyEmail, verifyPhone, getOwnerByUserId, getCustomerByUserId } from "@/app/utils/api";
+import AuthService from "@/app/services/AuthService";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import toast from "react-hot-toast";
+
+export default function OtpComponent({ isLoading, setIsLoading, isSuccess, setIsSuccess, loginMethod, formData, setStep }) {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const [otpCode, setOtpCode] = useState("");
+  const [otpError, setOtpError] = useState("");
+  const handleVerifyOTP = async (e) => {
+    e.preventDefault();
+    if (!otpCode || otpCode.length < 4) {
+      setOtpError(t("otpRequired"));
+      return;
+    }
+    setIsLoading(true);
+    setOtpError("");
+    try {
+      const verifyFn = loginMethod === "email" ? verifyEmail : verifyPhone;
+      const result = await verifyFn(otpCode);
+      if (result?.ok) {
+        try {
+          await AuthService.cacheCurrentUser(getOwnerByUserId, getCustomerByUserId);
+          console.log("Decoded:", AuthService.decodeToken());
+          console.log("User:", AuthService.getUser());
+        } catch (err) {
+          console.warn("Failed to cache user", err);
+        }
+      }
+      setIsSuccess(true);
+      toast.success(t("verifySuccess"));
+      setTimeout(() => {
+        router.push("/");
+      }, 1500);
+    } catch (err) {
+      console.error("[OTP] Error:", err);
+      setOtpError(err.message || t("verifyError"));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const resendOTP = async () => {
+    try {
+      if (loginMethod === "email") {
+        await sendEmailOTP();
+      } else {
+        await sendPhoneOTP();
+      }
+      toast.success(t("resendSuccess"), {
+        style: { background: "#dcfce7", color: "#166534" },
+      });
+    } catch (err) {
+      console.error("[OTP] Resend failed:", err);
+      toast.error(t("resendFailed"));
+    }
+  };
+
+  return (
+    <motion.form key="otp" initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -20 }} onSubmit={handleVerifyOTP} className="space-y-6">
+      <div className="text-center mb-4">
+        <Shield className="w-12 h-12 text-amber-500 mx-auto mb-3" />
+        <p className="text-amber-300 text-sm">
+          {t("sendOTPTo")}{" "}
+          <span className="text-amber-50 font-medium" dir="ltr">
+            {formData?.credential}
+          </span>
+        </p>
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-gray-300 mb-2">{t("otpLabel")}</label>
+        <input
+          type="text"
+          value={otpCode}
+          onChange={(e) => {
+            setOtpCode(e.target.value);
+            if (otpError) setOtpError("");
+          }}
+          className={`w-full px-4 py-4 bg-gray-800 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-white text-center text-2xl tracking-[0.5em] placeholder-gray-500 transition-all ${
+            otpError ? "border-red-500" : "border-gray-700"
+          }`}
+          placeholder="______"
+          maxLength={6}
+          dir="ltr"
+        />
+        {otpError && (
+          <motion.p initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} className="text-red-500 text-sm mt-1 text-center">
+            {otpError}
+          </motion.p>
+        )}
+      </div>
+
+      <motion.button
+        type="submit"
+        disabled={isLoading || isSuccess}
+        className="relative w-full bg-gradient-to-r from-amber-500 to-amber-600 text-white py-4 rounded-xl font-bold text-lg disabled:opacity-50 disabled:cursor-not-allowed"
+        whileHover={{ scale: 1.02 }}
+        whileTap={{ scale: 0.98 }}
+      >
+        <span className="flex items-center justify-center gap-2">
+          {isLoading ? (
+            <>
+              <Loader2 className="w-5 h-5 animate-spin" />
+              {t("verifying")}
+            </>
+          ) : isSuccess ? (
+            <>
+              <CheckCircle className="w-5 h-5" />
+              {t("success")}
+            </>
+          ) : (
+            <>
+              <KeyRound className="w-5 h-5" />
+              {t("verify")}
+            </>
+          )}
+        </span>
+      </motion.button>
+
+      <div className="flex items-center justify-between text-sm">
+        <button
+          type="button"
+          onClick={() => {
+            setStep("login");
+            setOtpCode("");
+            setOtpError("");
+          }}
+          className="text-gray-400 hover:text-white transition-colors"
+        >
+          ← {t("back")}
+        </button>
+        <button type="button" onClick={resendOTP} className="text-amber-400 hover:text-amber-300 transition-colors">
+          {t("resendCode")}
+        </button>
+      </div>
+    </motion.form>
+  );
+}