import React, { useState } from "react";
import { useAuth } from "../../hooks";
import { useEffect } from "react";
import "./authanticated.scss";
import "../../components/StylizedBtn/StylizedBtn.scss";
import passwordCheck from "../../services/password";

export const Login = () => {
  const { login } = useAuth();

  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  useEffect(() => {
    document.title = "Connexion";
  }, []);

  const onSubmit = async (e) => {
    e.preventDefault();
    await login(username, password);
  };

  return (
    <div className="container">
      <form className="form" onSubmit={onSubmit}>
        <h3 className="title">Connexion</h3>

        <input
          type="text"
          value={username}
          placeholder="Pseudo"
          className="ipt"
          required
          onChange={(e) => setUsername(e.target.value)}
        />
        <input
          type="password"
          value={password}
          placeholder="Mot de passe"
          className="ipt"
          required
          onChange={(e) => setPassword(e.target.value)}
        />

        <button className="stylized-btn" type="submit">
          Go
        </button>
      </form>
    </div>
  );
};
