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

type Props = React.ComponentProps<typeof Section>;

const config: ComponentTestSuiteConfig<Props> = {
  component: Section,
  name: "Section",
  props: {
    categoryName: "Decision making",
    showRail: true,
    children: (
      <TextBlock
        title="How proposals pass"
        body="Important decisions require alignment."
      />
    ),
  } as Props,
  requiredProps: ["categoryName", "children"],
  testCases: {
    renders: true,
    accessibility: true,
  },
};

describe("Section", () => {
  componentTestSuite<Props>(config);

  it("renders the category as a level-2 heading inside a section", () => {
    render(
      <Section categoryName="Decision making">
        <TextBlock
          title="How proposals pass"
          body="Important decisions require alignment."
        />
      </Section>,
    );
    expect(
      screen.getByRole("heading", { level: 2, name: "Decision making" }),
    ).toBeInTheDocument();
    expect(
      screen.getByRole("heading", { level: 3, name: "How proposals pass" }),
    ).toBeInTheDocument();
  });
});