import { useState } from "react";
import axios from "axios";
import Navbar from "./Navbar";
import Footer from "./Footer";
import { NavLink } from "react-router-dom";



const ForgotPassword = () => {

  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");

  const BASE_URL = import.meta.env.VITE_REACT_APP_SECRET; 

  const handleResetPassword = async () => {
    try {
      const response = await axios.post(`${BASE_URL}/users/forgotpassword`, {
        email,
      });

      setMessage(response.data.message);

    } catch (error) {
      console.error("Forgot Password Error:", error);
      setMessage(error.response.data.message);

    }
  };
 

  return (
    <>
    <Navbar />
    <br />
    <br /><br /><br /><br />
  

    <section
        className="card"
        style={{ minHeight: "100vh", backgroundColor: "#FFFFFF" }}
      >
        <div className="container-fluid px-0">
          <div className="row gy-4 align-items-center justify-content-center">
            <div className="col-12 col-md-0 col-xl-20 text-center text-md-start">
          
            </div>

            <div className="col-12 col-md-6 col-xl-5">
              <div
                className="card border-0 rounded-4 shadow-lg"
                style={{ width: "100%" }}
              >
                <div className="card-body p-3 p-md-4 p-xl-5">
                  <div className="row">
                    <div className="col-12">
                      <div className="mb-4">
                        <h2 className="h3">Forgot Password</h2>
                    
                        <hr />
                      </div>
                    </div>
                  </div>
                  
                    <div className="row gy-3 overflow-hidden">

                     
                      <div className="col-12">
                        <div className="form-floating mb-3">
                          <input
                            type="email"
                            className="form-control"
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                        
                            placeholder="name@example.com"
                            required="required"
                          />
                          <label htmlFor="email" className="form-label">
                          Enter your email address to receive a password reset link
                          </label>
                        </div>
                      </div>
                 
                      <div className="col-12">
                        <div className="d-grid">
                          <button
                            className="btn btn-primary btn-lg"
                            type="submit"
                            style={{
                              backgroundColor: "#fda417",
                              border: "#fda417",
                            }}
                            onClick={handleResetPassword}
                   
                          >
                       
                       Reset Password
                          </button>
                        </div>
                        <p
                style={{ color: "#067ADC" }}
                className="card-title text-center"
              >
                {message}
              </p>
                      </div>
                    </div>
                 
                  <div className="row">
                    <div className="col-12">
                      <div className="d-flex gap-2 gap-md-4 flex-column flex-md-row justify-content-md-end mt-4">
                        <p className="m-0 text-secondary text-center">
                          Already have an account?{" "}

                          <NavLink to="/login" className="link-primary text-decoration-none">
                  Sign In
                </NavLink>

                        </p>
                      </div>
                    </div>
                  </div>
                  <div className="row">
                    <div className="col-12"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
<Footer />
      </section>

    
    </>
  );
};

export default ForgotPassword;