import { type FormEvent, useRef } from 'react';

type Props = {
  onLogin: (username: string, password: string) => void;
};

const Login: React.FC<Props> = ({ onLogin }) => {
  const usernameRef = useRef<HTMLInputElement>(null);
  const passwordRef = useRef<HTMLInputElement>(null);

  function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    onLogin(usernameRef.current!.value, passwordRef.current!.value);
  }

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>
          Benutzername:
          <input type="text" ref={usernameRef} />
        </label>
      </div>
      <div>
        <label>
          Passwort:
          <input type="password" ref={passwordRef} />
        </label>
      </div>
      <button type="submit">anmelden</button>
    </form>
  );
};

export default Login;
