import React from "react";
import Button from "../Elements/Buttons";
import Input from "../Elements/Inputs";
import Header from "../Elements/Inputs/header.jsx";
import Footer from "../Elements/Inputs/footer.jsx";
import InputPw from "../Elements/Inputs/InputPw.jsx";
import { Link } from "react-router-dom";

const FormLogin = () => {
  return (
    <>
      <div className="flex justify-center items-center" type="login">
        <div className="max-w-lg w-full m-32">
          <Header name="Eskayvie" children="Login to your account"></Header>
          <form>
            <div className="mb-4">
              <Input
                id="email"
                type="email"
                variant="placeholder:text-gray-400"
                children="Email"
                placeholder="Enter your email"
              ></Input>
            </div>
            <div className="mb-6">
              <InputPw></InputPw>
              <Link to={"/forget"}
              className="text-blue-300 text-md font-semibold flex justify-end"
              >
              Forget password ?
              </Link>
            </div>
            <Button variant="p-7 text-md rounded-3xl text-white transition duration-300">
              Login
            </Button>
            <div className="mt-4 text-center text-md">
              <Footer text="Don't have an account ?" link="/register">
                Register
              </Footer>
            </div>
          </form>
        </div>
      </div>
    </>
  );
};

export default FormLogin;
