import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { logoutUser } from "../api/userApi";

function Logout(props) {
  var navigate = useNavigate();

  useEffect(function () {
    logoutUser()
      .catch(function () {})
      .finally(function () {
        props.setUser(null);
        navigate("/login");
      });
  }, [navigate, props.setUser]);

  return (
    <div className="rounded-md border border-slate-200 bg-white p-5">
      Logging out...
    </div>
  );
}

export default Logout;
