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

const NewPassword = () => {
  return (
    <div className="relative flex flex-col items-center justify-center p-5 w-full h-screen bg-white font-poppins">
      <div className="absolute top-5 left-5 bg-[#c2b9ff] rounded-full w-10 h-10 flex justify-center items-center">
        <FaArrowLeft className="text-white text-2xl cursor-pointer" />
      </div>

      <div className="flex flex-col md:flex-row items-center w-full max-w-4xl bg-transparent shadow-none">
        <div className="flex justify-center items-center flex-1 p-0 mb-5 md:mb-0">
          <img
            src="/image/newpw.png"
            alt="Forgot Password Illustration"
            className="w-[130%] max-w-[400px] -ml-[60%]"
          />
        </div>

        <div className="flex-1 pl-0 md:pl-10 flex flex-col justify-center">
          <h2 className="text-3xl mb-2">New Password</h2>
          <p className="font-normal text-lg mb-5 text-gray-500">
            Your new password must be different from previously used passwords.
          </p>
          <form className="flex flex-col">
            <input
              type="password"
              placeholder="New Password"
              className="p-3 mb-5 rounded-lg border border-gray-300 text-base w-full box-border"
            />
            <input
              type="password"
              placeholder="Confirm Password"
              className="p-3 mb-5 rounded-lg border border-gray-300 text-base w-full box-border"
            />
            <button
              type="button"
              className="p-2 bg-[#c2b9ff] rounded-lg text-white text-base cursor-pointer mt-1 mb-12 w-3/4 md:w-1/2 lg:w-1/3 self-center hover:bg-[#a095ff]"
            >
              Save
            </button>
          </form>
        </div>
      </div>
    </div>
  );
};

export default NewPassword;
