import React, { useState } from "react";
import styles from './Login.module.css'


const Login = () => {
  const [user, setUser] = useState<string>("");
  const [password, setPassword] = useState<string>("");

  function handleUserChange(e: React.ChangeEvent<HTMLInputElement>): void {
    setUser(e.target.value);
  }

  function handlePasswordChange(e: React.ChangeEvent<HTMLInputElement>): void {
    setPassword(e.target.value);
  }

  function handleSubmit(e: React.FormEvent<HTMLFormElement>): void {
    e.preventDefault();
    alert([user, password]);
    setUser("");
    setPassword("");
  }

  return (
    <div className={styles.container}>
      <div className={styles.formWrapper}>
        <form onSubmit={handleSubmit}>
          <h1>Inicia sesión.</h1>
          <img src="https://picsum.photos/300/200?random=1" alt="Imagen"/>

          <label>Usuario:</label>
          <input type="text" value={user} onChange={handleUserChange}/>

          <label>Contraseña</label>
          <input type="password" value={password} onChange={handlePasswordChange}/>

          <input type="submit" value="Iniciar sesión"/>
        </form>
      </div>
    </div>
)
};


export default Login;