"use client";

import { signOut } from "next-auth/react";
import { LogOut } from "lucide-react";
import { cn } from "@/lib/utils/cn";

interface LogoutButtonProps {
  className?: string;
  onNavigate?: () => void;
}

export function LogoutButton({ className, onNavigate }: LogoutButtonProps) {
  async function handleLogout() {
    onNavigate?.();
    // Hard clear via NextAuth then land on login only (no open redirect).
    await signOut({ callbackUrl: "/login", redirect: true });
  }

  return (
    <button
      type="button"
      onClick={handleLogout}
      className={cn(
        "flex w-full items-center gap-[11px] rounded-sm px-3 py-2.5 text-[13.5px] font-medium text-white/75 transition-colors hover:bg-white/6 hover:text-white",
        className
      )}
    >
      <LogOut className="h-4 w-4 shrink-0" strokeWidth={2} />
      Log out
    </button>
  );
}