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";

const FormRegister = () => {
  return (
    
    <>
      <div className="flex justify-center items-center" type="login">
        <div className="max-w-lg w-full m-32">
          <Header name="Eskayvie" children="create your account"></Header>
          <form>
            <div className="mb-4">
              <Input
                id="username"
                type="text"
                variant="placeholder:text-gray-400"
                children="Username"
                placeholder="Enter your username"
              ></Input>
            </div>

            <div className="mb-4">
              <Input
                id="ema il"
                type="email"
                variant="placeholder:text-gray-400"
                children="Email"
                placeholder="Enter your email"
              ></Input>
            </div>

            <div className="mb-6">
             <InputPw></InputPw>
            </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="already have an account ?" link="/login">
                Login here
              </Footer>
            </div>
          </form>
        </div>
      </div>
    </>
  );
};


export default FormRegister;
