import { screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import AppRoutes from "../routes";
import { renderWithProviders } from "../test/testHelpers";
import { ClientLayout } from "./ClientLayout";

describe("ClientLayout", () => {
  it("uses the main app style header shell and centered content container", () => {
    const { container } = renderWithProviders(<ClientLayout />);

    const header = container.querySelector("header");
    expect(header).toHaveClass("h-[75px]");
    expect(header).toHaveClass("bg-navbar-background");

    const headerInner = header?.firstElementChild;
    expect(headerInner).toHaveClass("w-full");
    expect(headerInner).toHaveClass("max-w-7xl");
    expect(headerInner).toHaveClass("mx-auto");

    const main = container.querySelector("main");
    expect(main).toHaveClass("w-full");
    expect(main).toHaveClass("max-w-7xl");
    expect(main).toHaveClass("mx-auto");
  });

  it("redirects unauthenticated client routes to the login page", async () => {
    renderWithProviders(<AppRoutes />, {
      route: "/tablo/tablo-1",
      testUser: undefined,
    });

    expect(await screen.findByTestId("auth-card-shell")).toBeInTheDocument();
    expect(await screen.findByRole("button", { name: "Connexion" })).toBeInTheDocument();
  });
});