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

type FeatureGridProps = React.ComponentProps<typeof FeatureGrid>;

const baseProps: FeatureGridProps = {
  title: "Feature Tools",
  subtitle: "Everything you need",
};

const config: ComponentTestSuiteConfig<FeatureGridProps> = {
  component: FeatureGrid,
  name: "FeatureGrid",
  props: baseProps,
  optionalProps: {
    className: "custom-class",
    title: undefined,
    subtitle: undefined,
  },
  primaryRole: "region",
  testCases: {
    renders: true,
    accessibility: true,
    keyboardNavigation: false,
    disabledState: false,
    errorState: false,
  },
};

componentTestSuite<FeatureGridProps>(config);

describe("FeatureGrid (behavioral tests)", () => {
  it("renders title and subtitle", () => {
    render(<FeatureGrid title="Test Title" subtitle="Test Subtitle" />);
    expect(
      screen.getByRole("heading", { name: "Test Title" }),
    ).toBeInTheDocument();
    expect(
      screen.getByRole("heading", { name: "Test Subtitle" }),
    ).toBeInTheDocument();
  });

  it("renders all four feature cards", () => {
    render(<FeatureGrid title="Test" subtitle="Test" />);
    expect(
      screen.getByRole("link", { name: "Decision-making support tools" }),
    ).toBeInTheDocument();
    expect(
      screen.getByRole("link", { name: "Values alignment exercises" }),
    ).toBeInTheDocument();
    expect(
      screen.getByRole("link", { name: "Membership guidance resources" }),
    ).toBeInTheDocument();
    expect(
      screen.getByRole("link", { name: "Conflict resolution tools" }),
    ).toBeInTheDocument();
  });

  it("has proper accessibility attributes", () => {
    render(<FeatureGrid title="Test" subtitle="Test" />);
    const section = document.querySelector("section");
    expect(section).toHaveAttribute("aria-labelledby", "feature-grid-headline");
    expect(screen.getByRole("grid")).toHaveAttribute(
      "aria-label",
      "Feature tools and services",
    );
  });

  it("handles missing props gracefully", () => {
    render(<FeatureGrid />);
    const section = document.querySelector("section");
    expect(section).toBeInTheDocument();
  });
});