import { useEffect } from "react";
import { useParams } from "react-router-dom";
import { useDispatch } from "react-redux";
import { NavLink } from "react-router-dom";
import { verifyEmail } from "../redux/features/userSlice";
import Navbar from "./Navbar";
import Footer from "./Footer";

const VerifyUser = () => {
  const dispatch = useDispatch();
  const { id, token } = useParams();

  useEffect(() => {
    dispatch(verifyEmail({ id, token }));
  }, [dispatch, id, token]);

  return (
    <>
    <Navbar />

     {/* contact section start */}
     <div className="contact_section layout_padding">
          <div className="container">
            <div className="row">
              <div className="col-md-12">
                <h1 className="contact_taital">Contact Us</h1>
              </div>
            </div>
          </div>
          <div className="container-fluid">
            <div className="contact_section_2">
              <div className="row">
                <div className="col-md-6">
                <br /><br /><br /><br /><br />
                <h1 className="card-title text-center">
  <NavLink to="/login" className="glightbox play-btn mb-4">
    {" "}
    Email verified successfully !!! Please
    <span style={{ color: "#F74B02" }}> login </span> {"   "}
    to access ...
  </NavLink>
</h1>
                </div>
                <div className="col-md-6 padding_left_15">
                  <div className="contact_img">
                    {/* <img src="images/contact-img.png" /> */}
                  </div>
                </div>
              </div>
            </div>
          </div>
   
        </div>
        {/* contact section end */}
        <Footer />

  </>
  );
};

export default VerifyUser;
