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

type SectionHeaderProps = React.ComponentProps<typeof SectionHeader>;

componentTestSuite<SectionHeaderProps>({
  component: SectionHeader,
  name: "SectionHeader",
  props: {
    title: "Title",
    subtitle: "Subtitle",
  } as SectionHeaderProps,
  requiredProps: ["title", "subtitle"],
  primaryRole: "heading",
  testCases: {
    renders: true,
    accessibility: true,
    keyboardNavigation: false,
    disabledState: false,
    errorState: false,
  },
});

describe("SectionHeader twoColumnsFromMd", () => {
  it("splits rule stack header at md when twoColumnsFromMd is set", () => {
    const { container } = render(
      <SectionHeader
        title="Popular templates"
        subtitle="Start from a proven pattern."
        variant="multi-line"
        ruleStackDesktopTypeScale
        twoColumnsFromMd
      />,
    );

    expect(
      screen.getByRole("heading", { name: /popular templates/i }),
    ).toBeInTheDocument();
    expect(container.firstElementChild).toHaveClass("md:flex-row");
  });
});

describe("SectionHeader rule stack title max width", () => {
  it("caps the title at the Figma 3-line width from lg", () => {
    render(
      <SectionHeader
        title="Get Templates that help your community run smoothly"
        subtitle="Start from a proven pattern."
        variant="multi-line"
        ruleStackDesktopTypeScale
      />,
    );

    expect(
      screen.getByRole("heading", {
        name: /get templates that help your community run smoothly/i,
      }),
    ).toHaveClass("lg:max-w-[571px]");
  });

  it("caps the title at the Figma 3-line width from md when twoColumnsFromMd is set", () => {
    render(
      <SectionHeader
        title="Get Templates that help your community run smoothly"
        subtitle="Start from a proven pattern."
        variant="multi-line"
        ruleStackDesktopTypeScale
        twoColumnsFromMd
      />,
    );

    expect(
      screen.getByRole("heading", {
        name: /get templates that help your community run smoothly/i,
      }),
    ).toHaveClass("md:max-w-[571px]");
  });
});