import { render, screen } from "@testing-library/react";
import { describe, it, expect } from "vitest";
import AboutHeader from "../../../app/components/type/AboutHeader";

describe("AboutHeader", () => {
  it("renders segmented headline", () => {
    render(
      <AboutHeader
        segments={[
          { type: "word", text: "CommunityRule" },
          { type: "word", text: "helps" },
        ]}
      />,
    );

    expect(
      screen.getByRole("heading", { name: /CommunityRule helps/i }),
    ).toBeInTheDocument();
  });

  it("sizes inline marks to the 320 / 640 / 1440 About Header variants", () => {
    const { container } = render(
      <AboutHeader
        segments={[
          { type: "word", text: "CommunityRule" },
          { type: "icon", icon: "arrow" },
          { type: "word", text: "groups" },
          { type: "icon", icon: "about" },
        ]}
      />,
    );

    const heading = screen.getByRole("heading");
    expect(heading.className).toContain("gap-[var(--spacing-scale-010)]");
    expect(heading.className).toContain("xl:gap-[var(--spacing-scale-012)]");

    const marks = container.querySelectorAll("h1 span.inline-flex");
    expect(marks).toHaveLength(2);
    expect(marks[0]?.className).toContain("size-[32px]");
    expect(marks[0]?.className).toContain("md:size-[64px]");
    expect(marks[0]?.className).toContain("xl:size-[80px]");
    expect(marks[1]?.className).toContain("size-[29px]");
    expect(marks[1]?.className).toContain("md:size-[58px]");
    expect(marks[1]?.className).toContain("xl:size-[80px]");
  });
});
