import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useVerify } from "@/store/verify";
import { useCallback, useState, type FC } from "react";

const VerifyEmailOtpPage: FC = () => {
  const [otp, setOtp] = useState("");

  const confirmOtp = useVerify((s) => s.confirmOTP);
  const confirming = useVerify((s) => s.confirming);

  const handleVerify = useCallback(() => {
    if (otp.length !== 6) return;
    confirmOtp({
      otp,
    });
  }, [confirmOtp, otp]);

  return (
    <div className="flex flex-col items-stretch gap-2 max-w-sm mx-auto p-4">
      <h1 className="text-xl font-medium dark:text-gray-200">
        OTP Verification
      </h1>
      <p className="text-sm dark:text-gray-400">
        We've sent you verification code on your email address, please open your
        mailbox and enter the verification code in order to continue.
      </p>
      <Input
        placeholder="Enter OTP"
        value={otp}
        onChange={(e) => {
          e.preventDefault();
          setOtp(e.target.value);
        }}
      />
      <Button
        className="mt-3 w-full"
        onClick={handleVerify}
        loading={confirming}
        disabled={confirming}
      >
        Verify
      </Button>
    </div>
  );
};

export default VerifyEmailOtpPage;
