import { render, screen } from "@testing-library/react";
import { vi, describe, it, expect, beforeEach } from "vitest";
import { LogoutButton } from "./LogoutButton";
import { useFormStatus } from "react-dom";
import React from "react";

// Mock react-dom
vi.mock("react-dom", async () => {
  const actual = await vi.importActual<typeof import("react-dom")>("react-dom");
  return {
    ...actual,
    useFormStatus: vi.fn(),
  };
});

describe("LogoutButton", () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  it("renders correctly in idle state", () => {
    vi.mocked(useFormStatus).mockReturnValue({
      pending: false,
      data: null,
      method: null,
      action: null,
    });

    render(<LogoutButton />);

    const button = screen.getByRole("button", { name: /jetzt abmelden/i });
    expect(button).toBeInTheDocument();
    expect(button).not.toBeDisabled();
    // Lucide icon check
    expect(button.querySelector("svg")).toBeInTheDocument();
  });

  it("renders correctly in pending state", () => {
    vi.mocked(useFormStatus).mockReturnValue({
      pending: true,
      data: null,
      method: null,
      action: null,
    } as any);

    render(<LogoutButton />);

    // When loading, the text is replaced by a spinner
    const button = screen.getByRole("button", { name: /wird geladen/i });
    expect(button).toBeInTheDocument();
    expect(button).toBeDisabled();
    expect(button).toHaveAttribute("aria-busy", "true");
  });
});