import React from "react";
import { Link } from "react-router-dom";
import Logo from "../../components/Logo";

const Signin = () => {
  return (
    <div className="w-full">
      <div className="w-[300px] mx-auto bg-gray-100 pb-2 my-9 border border-zinc-500">
        <form onSubmit={(e)=>e.preventDefault()}>
          <div className="w-full p-3 flex justify-center text-white text-lg bg-darkBrown">
            <Logo />
          </div>
          <div>
            <h3 className="w-full text-lg py-2 font-titleFont italic text-center">
              Sign in
            </h3>
          </div>
          <div className="px-2 flex flex-col gap-2">
            <label className="text-sm" htmlFor="email">
              Email Address
            </label>
            <input
              name="email"
              required
              className="w-full py-1 px-2 border border-zinc-400 text-base rounded-sm outline-none focus-within:border-green focus-within:shadow-input lowercase duration-100"
              type="email"
            />
          </div>
          <div className="px-2 flex flex-col gap-2">
            <label className="text-sm" htmlFor="password">
              Password
            </label>
            <input
              name="password"
              required
              className="w-full py-1 px-2 border border-zinc-400 text-base rounded-sm outline-none focus-within:border-green focus-within:shadow-input duration-100"
              type="password"
            />
          </div>
          <span className="px-2 w-full flex justify-end text-sm">
            New customer?
            <Link className="text-green hover:text-sky_blue hover:underline cursor-pointer" to={"/register"}>Register</Link>
          </span>
          <div className="flex justify-end p-2">
            <button className="px-2 py-1 bg-green text-white hover:text-black rounded-md hover:bg-sky_blue">
              Sign in
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default Signin;
