import React, { useCallback, useState } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import {useAppDispatch} from "../app/hooks";
import { login } from "../features/auth/auth-slice";

const Login: React.FC = () => {
  const dispatch = useAppDispatch();
  const navigate = useNavigate();

  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const handleLogin = () => {
    console.log("handeling login");
    console.log(username);
    console.log(password);
    dispatch(login({ username, password }));
  };
  return (
    <div>
      <label htmlFor="username"></label>
      <input
        type="text"
        name="username"
        id="username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <label htmlFor="password"></label>
      <input
        type="password"
        name="password"
        id="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <input type="submit" value="Login" onClick={handleLogin} />
    </div>
  );
};

export default Login;
