import { PageSkeleton, Skeleton } from "./index";

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

describe("Skeleton", () => {
  it("renders with default props (1 skeleton item)", () => {
    const { container } = render(<Skeleton />);
    const items = container.querySelectorAll(".h-8");
    expect(items).toHaveLength(1);
  });

  it("renders the specified count of skeleton items", () => {
    const { container } = render(<Skeleton count={4} />);
    const items = container.querySelectorAll(".h-8");
    expect(items).toHaveLength(4);
  });

  it("applies custom className to each skeleton item", () => {
    const { container } = render(<Skeleton count={2} className="w-1/2" />);
    const items = container.querySelectorAll(".h-8");
    items.forEach(item => {
      expect(item.className).toContain("w-1/2");
    });
  });

  it("applies decreasing opacity to each item", () => {
    const { container } = render(<Skeleton count={3} />);
    const items = container.querySelectorAll(".h-8");
    expect(items[0].style.opacity).toBe("1");
    expect(items[1].style.opacity).toBe("0.9");
    expect(items[2].style.opacity).toBe("0.8");
  });

  it("wraps items in an animate-pulse container", () => {
    const { container } = render(<Skeleton />);
    expect(container.firstChild).toHaveClass("animate-pulse", "space-y-4");
  });

  it("has the correct displayName", () => {
    expect(Skeleton.displayName).toBe("Skeleton");
  });
});

describe("PageSkeleton", () => {
  it("renders the generic-skeleton container", () => {
    render(<PageSkeleton />);
    expect(screen.getByTestId("generic-skeleton")).toBeInTheDocument();
  });

  it("renders title section", () => {
    render(<PageSkeleton />);
    expect(screen.getByTestId("title")).toBeInTheDocument();
  });

  it("renders subtitle section", () => {
    render(<PageSkeleton />);
    expect(screen.getByTestId("subtitle")).toBeInTheDocument();
  });

  it("renders content section", () => {
    render(<PageSkeleton />);
    expect(screen.getByTestId("content")).toBeInTheDocument();
  });

  it("renders additional-info section", () => {
    render(<PageSkeleton />);
    expect(screen.getByTestId("additional-info")).toBeInTheDocument();
  });

  it("renders cta-button section", () => {
    render(<PageSkeleton />);
    expect(screen.getByTestId("cta-button")).toBeInTheDocument();
  });
});