import { useState } from "react";
import { Button, FloatLabelInput } from "..";
import { useNavigate } from "react-router-dom";
import { RouteHandler } from "../../router/routes";


type FormType = {
  email: string;
  password: string;
};

type HandleChange = {
  name: string;
  value: string;
};

export default function Login() {
    const navigate = useNavigate()

  let [formDetails, setFormDetails] = useState<FormType>({
    email: "",
    password: "",
  });

  const handleFormChange = ({
    target: { name, value },
  }: {
    target: HandleChange;
  }): any => {
    setFormDetails((prev) => ({ ...prev, [name]: value }));
  };

  return (
    <div className={`w-full overflow-y-auto bg-top bg-cover`}>
      <div className="w-full flex justify-center">
        <div className="w-2/3 md:max-w-[570px]">
          <div className="bg-white w-full rounded-2xl border-2 border-black">
            <div className="w-full p-5 sm:p-10 lg:p-20 flex flex-col justify-between items-center h-full">
              <div className="mb-4">
                <h1 className="text-2xl text-center font-bold leading-3 tracking-wide text-black dark:text-black">
                  Welcome!
                </h1>
                <p className="text-xl mt-4 text-center font-medium text-black dark:text-black">
                  Please login with your email and default password provided to you
                </p>
              </div>

              <div className="w-full">
                {/* INPUTS */}
                <div className="w-full">
                  <div className="relative my-2 py-2">
                    <FloatLabelInput
                      id="email"
                      name="email"
                      type="email"
                      placeHolder="Email"
                      labelName="Email"
                      value={formDetails.email}
                      inputClass=""
                      onChange={handleFormChange}
                    />
                  </div>
                  <div className="relative my-2 py-2">
                    <FloatLabelInput
                      id="password"
                      name="password"
                      type="password"
                      placeHolder="Password"
                      labelName="Password"
                      value={formDetails.password}
                      inputClass=""
                      onChange={handleFormChange}
                    />
                  </div>
                </div>

                <div className="mt-10 w-full sm:flex justify-between items-center gap-2">
                  <Button
                    text="Enter"
                    className="rounded-md w-full sm:w-2/5 text-xl capitalize font-bold"
                    onClick={()=>{navigate(RouteHandler.otppage, {replace:true})}}
                  />
                  {/* <Link to='' className='text-black text-sm'>Forget your password?</Link> */}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}