import { Dispatch, FormEventHandler, SetStateAction } from "react";
import Button from "./Button";
import InputField from "./InputField";

/**
 * A login field complete with input fields
 * and a button for submitting the information
 * @param props - Settings
 * @returns {JSX.Element} A login component
 * @example
 * <Login
 *   handleSubmit={handleSubmit}
 *   setUsername={setUsername}
 *   setPassword={setPassword}
 *   username={username}
 *   password={password}
 * />
 */
function Login(props: {
  handleSubmit: FormEventHandler<HTMLFormElement>;
  setUsername: Dispatch<SetStateAction<string>>;
  setPassword: Dispatch<SetStateAction<string>>;
  username: string;
  password: string;
}): JSX.Element {
  return (
    <form className="flex flex-col items-center" onSubmit={props.handleSubmit}>
      <InputField
        type="text"
        label="Username"
        onChange={(e) => {
          props.setUsername(e.target.value);
        }}
        value={props.username}
      />
      <InputField
        type="password"
        label="Password"
        onChange={(e) => {
          props.setPassword(e.target.value);
        }}
        value={props.password}
      />
      <Button
        text="Login"
        onClick={(): void => {
          return;
        }}
        type={"submit"}
      />
    </form>
  );
}

export default Login;