import { describe, it, expect } from "vitest";
import { Hono } from "hono";
import { PageHeader } from "../page-header.js";

describe("PageHeader", () => {
  it("renders title in h1 with page-header class", async () => {
    const app = new Hono().get("/", (c) =>
      c.html(<PageHeader title="My Page" />)
    );
    const res = await app.request("/");
    const html = await res.text();
    expect(html).toContain('class="page-header"');
    expect(html).toContain("<h1");
    expect(html).toContain("My Page");
  });

  it("renders description when provided", async () => {
    const app = new Hono().get("/", (c) =>
      c.html(<PageHeader title="T" description="A description" />)
    );
    const res = await app.request("/");
    const html = await res.text();
    expect(html).toContain("A description");
  });

  it("omits description element when not provided", async () => {
    const app = new Hono().get("/", (c) =>
      c.html(<PageHeader title="T" />)
    );
    const res = await app.request("/");
    const html = await res.text();
    expect(html).not.toMatch(/<p[^>]*>\s*<\/p>/);
  });

  it("renders action slot when provided", async () => {
    const app = new Hono().get("/", (c) =>
      c.html(
        <PageHeader title="T" action={<button>New Topic</button>} />
      )
    );
    const res = await app.request("/");
    const html = await res.text();
    expect(html).toContain('class="page-header__action"');
    expect(html).toContain("New Topic");
  });
});