"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { FaSignOutAlt } from "react-icons/fa";

export default function LogoutButton({ locale = "en" }) {
  const router = useRouter();

  const [loading, setLoading] = useState(false);

  async function handleLogout() {
    if (loading) return;

    try {
      setLoading(true);

      await fetch("/api/auth/logout", {
        method: "POST",
        credentials: "include",
      });
    } catch (error) {
      console.error("LOGOUT ERROR:", error);
    } finally {
      router.replace(`/${locale}/login`);

      router.refresh();
    }
  }

  return (
    <button
      type="button"
      onClick={handleLogout}
      disabled={loading}
      className="
        flex
        w-full
        items-center
        gap-3
        rounded-lg
        px-4
        py-3
        text-gray-400
        transition
        duration-300
        hover:bg-red-500/10
        hover:text-red-400
        disabled:opacity-50
      "
    >
      <FaSignOutAlt />

      <span>{loading ? "Signing out..." : "Logout"}</span>
    </button>
  );
}