import React, { useState } from "react";
import { useNavigate } from "react-router-dom";

import { useLogout } from "@hooks/useLogout";

import { Loader } from "@components/Common/Loader/Loader";

import "./logoutButton.scss";

export const LogoutButton = () => {
  const [isLoggingOut, setIsLoggingOut] = useState(false);
  const navigate = useNavigate();
  const { logout } = useLogout();

  return (
    <button
      className="logout-button"
      onClick={() => {
        setIsLoggingOut(true);
        logout();
        setIsLoggingOut(false);
        navigate("/auth");
      }}
    >
      {isLoggingOut ? <Loader /> : "Выйти"}
    </button>
  );
};
