import { useState } from "react";
import login from "../utils/login.js";
import getUser from "../utils/getUser.js";

function LoginForm({ className }) {

    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    async function handleSubmit(e) {

        e.preventDefault();

        await login(email, password);
        getUser();

    }

    return (
        <div className={className}>
            <h1>Connexion</h1>

            <div className="form-group">
                <br/>
                <label htmlFor="email" className="floating-label">Adresse e-mail</label>
                <input type="email" id="email" value={email} onChange={e => setEmail(e.target.value)} required/>
            </div>

            <div className="form-group">
                <label htmlFor="password" className="floating-label">Mot de passe</label>
                <input type="password" id="password" value={password} onChange={e => setPassword(e.target.value)} required/>
                <br/>
            </div>

            <button className="login-button" onClick={e => handleSubmit(e)}>Se connecter</button>
        </div>
    );
}
export default LoginForm;