import "@testing-library/jest-dom/vitest";
import { render } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import FaqAccordion from "../../../app/components/sections/Accordion";

describe("FaqAccordion", () => {
  it("uses Figma section inset per breakpoint and does not cap the inner stack at 1440", () => {
    const { container } = render(
      <FaqAccordion
        title="Get answers to your questions"
        items={[{ title: "What is CommunityRule, and who is it for?", answer: "Groups." }]}
      />,
    );

    const section = container.querySelector("section");
    expect(section).toBeTruthy();
    expect(section).toHaveClass("px-[var(--space-100)]");
    expect(section).toHaveClass("py-[var(--space-800)]");
    expect(section).toHaveClass("md:px-[var(--space-2400)]");
    expect(section).toHaveClass("md:py-[var(--space-1800)]");
    expect(section).toHaveClass("lg:px-[var(--space-4000)]");
    expect(section).toHaveClass("lg:py-[var(--space-2400)]");
    expect(section).not.toHaveClass("md:px-[var(--space-4000)]");
    expect(section).not.toHaveClass("md:py-[var(--space-2400)]");
    expect(section?.firstElementChild).not.toHaveClass("max-w-[1440px]");
  });
});