import Button from "@/utils/button";
import OTPInput from "./otpInput";
import { useEffect, useState, } from "react";

import {Props} from "@/constants/types"


export default function VerifyCode({ onBack }: Props) {
    const [timer, setTimer] = useState(30);
   
    //Timer Functionality Sets 30s to 0s
  useEffect(() => {
    if (timer === 0) return;

    const interval = setInterval(() => {
      setTimer((prev) => prev - 1);
    }, 1000);

    return () => clearInterval(interval);
  }, [timer]);

  const handleResend = () => {
    if (timer > 0) return;

    // Call your resend OTP 

    setTimer(30);
  };

  return (
    <div className="space-y-6">
      <button
        onClick={onBack}
        className="text-slate-400 hover:text-white"
      >
        ← Back to sign in
      </button>

      <div>
        <h2 className="text-2xl font-bold text-white">
          Two-factor authentication
        </h2>

          <p className="text-slate-400">
            Enter the 6-digit code from your authenticator app, or the<br/>
            code we sent to{" "}
            <span className="font-semibold text-white">
              d•••@kafm.io
            </span>.
          </p>
      </div>


       {/* OTP input box  */}
      <OTPInput />

     <div className="flex items-center gap-2">
          <Button
           
            onClick={handleResend}
         
            className={`font-semibold transition-colors ${
              timer > 0
                ? "text-slate-400 cursor-not-allowed"
                : "text-teal-400 hover:text-teal-300 cursor-pointer"
            }`}
          >
            Resend code
          </Button>

          {timer > 0 && (
            <span className="text-sm text-slate-500">
              {timer}s
            </span>
          )}
        </div>


      <label className="flex items-center gap-2 text-slate-300">
        <input type="checkbox" />
        Trust this device for 30 days
      </label>

      <Button 
      className="h-10 w-full rounded-xl bg-gradient-to-r from-teal-400 to-emerald-400 font-semibold text-black">
        Verify & Continue
      </Button>
    </div>
  );
}