import { render, screen } from "@testing-library/react";
import { BrowserRouter } from "react-router-dom";
import { describe, expect, it, vi } from "vitest";
import { Header } from "./header";

// Mock the iconHelpers
vi.mock("../utils/iconHelpers", () => ({
  getXtabloIcon: () => "/icon.jpg",
}));

describe("Header", () => {
  it("renders without crashing", () => {
    render(
      <BrowserRouter>
        <Header />
      </BrowserRouter>
    );
    expect(screen.getByAltText("Logo XTablo")).toBeInTheDocument();
  });

  it("displays the XTablo logo and title", () => {
    render(
      <BrowserRouter>
        <Header />
      </BrowserRouter>
    );
    expect(screen.getByAltText("Logo XTablo")).toBeInTheDocument();
    expect(screen.getByText("XTablo")).toBeInTheDocument();
  });

  it("renders navigation links", () => {
    render(
      <BrowserRouter>
        <Header />
      </BrowserRouter>
    );
    expect(screen.getByText("Fonctionnalités")).toBeInTheDocument();
    expect(screen.getByText("Tarifs")).toBeInTheDocument();
    expect(screen.getByText("Contact")).toBeInTheDocument();
  });

  it("renders login and signup buttons", () => {
    render(
      <BrowserRouter>
        <Header />
      </BrowserRouter>
    );
    expect(screen.getByText("Connexion")).toBeInTheDocument();
    expect(screen.getByText("S'inscrire")).toBeInTheDocument();
  });

  it("has correct links for login and signup", () => {
    render(
      <BrowserRouter>
        <Header />
      </BrowserRouter>
    );
    const loginLink = screen.getByText("Connexion").closest("a");
    const signupLink = screen.getByText("S'inscrire").closest("a");
    expect(loginLink).toHaveAttribute("href", "/login");
    expect(signupLink).toHaveAttribute("href", "/signup");
  });

  it("has sticky positioning", () => {
    const { container } = render(
      <BrowserRouter>
        <Header />
      </BrowserRouter>
    );
    const header = container.querySelector("header");
    expect(header).toHaveClass("sticky");
  });
});
