import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { AnimatedBackground } from "./AnimatedBackground";

describe("AnimatedBackground", () => {
  it("renders without crashing", () => {
    const { container } = render(<AnimatedBackground />);
    expect(container.firstChild).toBeInTheDocument();
  });

  it("renders multiple animated logo images", () => {
    render(<AnimatedBackground />);
    const images = screen.getAllByAltText("Xtablo");
    expect(images.length).toBeGreaterThan(0);
  });

  it("has pointer-events-none class to prevent interaction", () => {
    const { container } = render(<AnimatedBackground />);
    const wrapper = container.firstChild as HTMLElement;
    expect(wrapper).toHaveClass("pointer-events-none");
  });

  it("has absolute positioning", () => {
    const { container } = render(<AnimatedBackground />);
    const wrapper = container.firstChild as HTMLElement;
    expect(wrapper).toHaveClass("absolute");
    expect(wrapper).toHaveClass("inset-0");
  });

  it("has overflow hidden to clip content", () => {
    const { container } = render(<AnimatedBackground />);
    const wrapper = container.firstChild as HTMLElement;
    expect(wrapper).toHaveClass("overflow-hidden");
  });

  it.skip("has full width and height", () => {
    const { container } = render(<AnimatedBackground />);
    const wrapper = container.firstChild as HTMLElement;
    expect(wrapper).toHaveClass("w-full", "h-full");
  });

  it("renders images with varying sizes and positions", () => {
    render(<AnimatedBackground />);
    const images = screen.getAllByAltText("Xtablo");

    // Check that images have different styles/classes for animation variety
    const hasVariation = images.some((img, index) => {
      const otherImg = images[(index + 1) % images.length];
      return img.className !== otherImg.className || img.style.cssText !== otherImg.style.cssText;
    });

    expect(hasVariation).toBe(true);
  });
});
