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}>
      <div className="space-y-3">
        <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}
        />
      </div>
      <Button
        text="Login"
        onClick={(): void => {
          return;
        }}
        type={"submit"}
      />
    </form>
  );
}

export default Login;