import { createRef } from "react";
import { render, screen } from "@testing-library/react";
import { Stack } from ".";

describe("Stack", () => {
  it("should render without errors", () => {
    render(<Stack>Sample text</Stack>);
  });

  describe("uses correct class names", () => {
    it.each(["xxs", "xs", "sm", "md", "lg", "xl", "xxl"] as const)(
      "applies --gap-%s class",
      gap => {
        render(
          <Stack gap={gap} data-testid="test">
            Sample text
          </Stack>,
        );
        expect(screen.getByTestId("test")).toHaveClass(`--gap-${gap}`);
      },
    );

    it("applies --gap-{n} class for numeric gap values", () => {
      render(
        <Stack gap={4} data-testid="test">
          Sample text
        </Stack>,
      );
      expect(screen.getByTestId("test")).toHaveClass("--gap-4");
    });

    it("uses mobius class", () => {
      const { container } = render(<Stack>content</Stack>);
      expect(container.firstChild).toHaveClass("mobius");
    });

    it("uses mobius-stack class", () => {
      const { container } = render(<Stack>content</Stack>);
      expect(container.firstChild).toHaveClass("mobius-stack");
    });
  });

  it("forwards ref", () => {
    const ref = createRef<HTMLDivElement>();
    render(<Stack ref={ref}>Text</Stack>);
    expect(ref.current).toBeInstanceOf(HTMLDivElement);
  });
});
