import { useAuth } from "../providers/AuthProvider";
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";

type InputType = {
  label: string;
  forLabel: string;
  type: "password" | "email";
};
const Input = ({ label, forLabel, type }: InputType) => {
  return (
    <div>
      <label htmlFor={forLabel} className="text-sm">
        {label}
      </label>
      <input
        id={forLabel}
        type={type}
        required
        name={forLabel}
        className="bg-black text-white rounded-lg border-white block"
      />
    </div>
  );
};

export default function LogIn() {
  const auth = useAuth();
  const navigate = useNavigate();

  useEffect(() => {
    if (auth.user) navigate("/");
  }, [auth.user]);

  return (
    <div className="flex justify-center items-center min-h-screen bg-black">
      <div className="bg-zinc-600 text-white rounded-lg p-2">
        <h1 className="font-semibold">Login</h1>
        <hr className="my-2" />
        <form method="post" action="/api/users/login">
          <div className="space-y-2">
            <Input type={"email"} forLabel="email" label="Email" />
            <Input type={"password"} forLabel="password" label="Password" />
          </div>
          <div className="my-2">
            <button className="bg-black p-2 rounded-lg w-full" type="submit">
              Submit
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}