import { useEffect } from "react";
import { toast } from "react-toastify";
import { Container } from "react-bootstrap";
import Logo from "@/assets/images/logo.svg";
import { useParams } from "next/navigation";
import PageLoader from "@/Common/PageLoader/PageLoader";
import { useRouter } from "next/router";
import WebService from "@/Services/WebService";
const VerifyEmailForForgetPassword = () => {
  let params = useParams();
  let account_verification_id = params.url;
  const navigate = useRouter();

  useEffect(() => {
    if (account_verification_id) {
      handleVerifyEmail();
    }
  }, []);

  const handleVerifyEmail = () => {
    return WebService.BeforLoginPostAPI({
      action: `auth/forgot-password/verify`,
      body: { token: account_verification_id },
    })
      .then((res: any) => {
        toast.success(res?.message);
        navigate.push({
          pathname: "/reset-password",
          query: { reset_password_token: res?.id },
        });
      })
      .catch((error) => {
        navigate.push("/login")
        toast.error(error?.response?.data?.message);
      });
  };
  return (
    <>

      <>
        <Container fluid>
          <div className="p-4">
            <img src={Logo.src} width="145" className="mb-3" alt="Logo" />
          </div>
        </Container>
        <div className="container">
          <div className="verify-email-container" style={{ height: "auto" }}>
            <div className="page-content">
              <div className="loader-container">
                <PageLoader />
              </div>
              <div className="loading-message">Verifying...Please wait...</div>
            </div>
          </div>
        </div>
      </>



    </>
  );
};
export default VerifyEmailForForgetPassword;