import React from "react";
import { FaArrowLeft } from "react-icons/fa";

const ForgetPassword = () => {
  return (
    <>
      <div className="flex flex-col items-center justify-center p-5 min-h-screen overflow-hidden relative">
        <div className="absolute top-5 left-5">
          <div className="bg-indigo-200 rounded-full w-10 h-10 flex justify-center items-center">
            <FaArrowLeft className="text-white text-2xl cursor-pointer" />
          </div>
        </div>
        <div className="flex flex-col md:flex-row items-center w-full max-w-3xl mt-10 md:mt-0">
          <div className="flex-1 flex items-center justify-center">
            <img
              src="/image/forgetpw.png"
              alt="Forgot Password Illustration"
              className="w-full max-w-xs md:max-w-md lg:max-w-lg ml-0 transform -translate-x-0"
            />
          </div>
          <div className="flex-1 flex flex-col justify-center pl-0 md:pl-10 mt-10 md:mt-0">
            <h2 className="text-3xl mb-2 font-bold text-center md:text-left">
              Forgot Password
            </h2>
            <p className="font-light text-lg mb-5 text-gray-500 text-center md:text-left">
              Enter the email address associated with your account.
            </p>
            <form className="flex flex-col items-center md:items-start">
              <input
                type="email"
                placeholder="Enter email"
                className="p-3 mb-5 rounded-lg border border-gray-300 text-lg w-full"
              />
              <button
                type="button"
                className="p-2 bg-indigo-200 rounded-lg text-white text-lg hover:bg-indigo-300 mt-1 w-full md:w-3/4"
              >
                Reset Password
              </button>
            </form>
          </div>
        </div>
      </div>
    </>
  );
};

export default ForgetPassword;
