import { assertEquals, cleanup, render, screen } from "./setup.ts";
import PageContainer from "../../components/layout/PageContainer.tsx";

Deno.test({
  name: "PageContainer - renders children",
  fn() {
    render(
      <PageContainer>
        <span>Child content</span>
      </PageContainer>,
    );
    assertEquals(screen.getByText("Child content").tagName, "SPAN");
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "PageContainer - applies base layout classes",
  fn() {
    const { container } = render(<PageContainer>Test</PageContainer>);
    const div = container.firstElementChild!;
    assertEquals(div.className.includes("w-screen"), true);
    assertEquals(div.className.includes("h-screen"), true);
    assertEquals(div.className.includes("flex"), true);
    assertEquals(div.className.includes("flex-col"), true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "PageContainer - applies centering classes when centered=true",
  fn() {
    const { container } = render(
      <PageContainer centered>Centered</PageContainer>,
    );
    const div = container.firstElementChild!;
    assertEquals(div.className.includes("items-center"), true);
    assertEquals(div.className.includes("justify-center"), true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "PageContainer - no centering when centered=false (default)",
  fn() {
    const { container } = render(<PageContainer>Not centered</PageContainer>);
    const div = container.firstElementChild!;
    assertEquals(div.className.includes("items-center"), false);
    assertEquals(div.className.includes("justify-center"), false);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "PageContainer - appends custom className",
  fn() {
    const { container } = render(
      <PageContainer className="my-page">Custom</PageContainer>,
    );
    const div = container.firstElementChild!;
    assertEquals(div.className.includes("my-page"), true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});