import "@testing-library/jest-dom/vitest";
import userEvent from "@testing-library/user-event";
import { render, screen } from "@testing-library/react";
import { describe, it, expect } from "vitest";
import Accordion from "../../../app/components/layout/Accordion";

describe("Accordion", () => {
  it("toggles panel content", async () => {
    const user = userEvent.setup();

    render(
      <Accordion title="Question" defaultOpen={false}>
        Answer copy
      </Accordion>,
    );

    expect(screen.queryByText("Answer copy")).not.toBeInTheDocument();

    await user.click(screen.getByRole("button", { name: "Question" }));

    expect(screen.getByText("Answer copy")).toBeInTheDocument();
  });

  it("stacks FAQ size variants at lg and xl", () => {
    render(
      <Accordion size="s" lgSize="m" xlSize="l" title="Question">
        Answer copy
      </Accordion>,
    );

    const button = screen.getByRole("button", { name: "Question" });
    expect(button).toHaveClass("min-h-[88px]");
    expect(button).toHaveClass("lg:min-h-[104px]");
    expect(button).toHaveClass("xl:min-h-[135px]");
    expect(button).toHaveClass("xl:gap-[var(--spacing-scale-048)]");

    const title = screen.getByText("Question");
    expect(title).toHaveClass("text-[14px]");
    expect(title).toHaveClass("lg:text-large-label");
    expect(title).toHaveClass("xl:text-x-large-label");
    expect(title).toHaveClass("xl:font-normal");
    expect(title).toHaveClass("xl:leading-7");
  });
});