import React from "react";
import { Link } from 'react-router-dom';
import WrenchBoard from "../../../assets/images/wrenchboard.png"
import InputCom from "../../Helpers/Inputs/InputCom";
import AuthLayout from "../AuthLayout";

export default function ForgotPassword() {
  return (
    <>
      <AuthLayout
        slogan="Welcome to WrenchBoard"
      >
        <div className="w-full">
          <div className='mb-12'>
            <Link to='#'>
              <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
            </Link>
          </div>
          <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5">
            <div className="flex flex-col justify-center w-full h-full px-5">
            <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
                <h1 className="text-[#181c32] font-semibold dark:text-white mb-3" style={{
                  fontSize: 'calc(1rem + .6vw)'
                }}>
                  Forget Password
                </h1>
                <span className="text-gray-400 font-medium text-xl">Enter your email to reset your password.</span>
              </div>
              <div className="input-area">
                <div className="input-item mb-5">
                  <InputCom
                    placeholder="Your Username/Email"
                    label="Email"
                    name="email"
                    type="email"
                    iconName="message"
                  />
                </div>
                <div className="signin-area mb-3.5">
                <div className="flex justify-center items-center gap-2">
                    <button
                      type="button"
                      className={`rounded-[0.475rem] mb-6 text-[1.15rem] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
                    >
                      Send Code
                    </button>
                    <button
                      type="button"
                      className={`rounded-[0.475rem] mb-6 text-[1.15rem] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem] `}
                    >
                      Cancel
                    </button>
                  </div>
                  {/* <a
                    href="/verify-you"
                    className="w-full rounded-[50px] mb-5 h-[58px] text-xl text-white font-bold flex justify-center bg-purple items-center"
                  >
                    Send Code
                  </a> */}
                </div>
              </div>
            </div>
          </div>
        </div>
      </AuthLayout>
    </>
  );
}