import { describe, it, expect } from "vitest";
import { render } from "@testing-library/react";
import {
  Skeleton,
  SkeletonCircle,
  RoomCardSkeleton,
  ProfileCardSkeleton,
  RecordItemSkeleton,
  SwipeDeckSkeleton,
  BlindboxRoomSkeleton,
  BlindboxListSkeleton,
} from "./Skeleton";

describe("Skeleton", () => {
  it("renders with animate-pulse", () => {
    const { container } = render(<Skeleton />);
    expect(container.firstChild).toHaveClass("animate-pulse");
  });

  it("accepts custom className", () => {
    const { container } = render(<Skeleton className="h-4 w-20" />);
    const el = container.firstChild as HTMLElement;
    expect(el.className).toContain("h-4");
    expect(el.className).toContain("w-20");
  });
});

describe("SkeletonCircle", () => {
  it("renders rounded-full shape", () => {
    const { container } = render(<SkeletonCircle />);
    expect(container.firstChild).toHaveClass("rounded-full");
  });
});

describe("Skeleton composites", () => {
  it("renders RoomCardSkeleton", () => {
    const { container } = render(<RoomCardSkeleton />);
    expect(container.querySelectorAll(".animate-pulse").length).toBeGreaterThan(0);
  });

  it("renders ProfileCardSkeleton", () => {
    const { container } = render(<ProfileCardSkeleton />);
    expect(container.querySelectorAll(".animate-pulse").length).toBeGreaterThan(0);
  });

  it("renders RecordItemSkeleton", () => {
    const { container } = render(<RecordItemSkeleton />);
    expect(container.querySelectorAll(".animate-pulse").length).toBeGreaterThan(0);
  });

  it("renders SwipeDeckSkeleton", () => {
    const { container } = render(<SwipeDeckSkeleton />);
    expect(container.querySelectorAll(".animate-pulse").length).toBeGreaterThan(0);
  });

  it("renders BlindboxRoomSkeleton", () => {
    const { container } = render(<BlindboxRoomSkeleton />);
    expect(container.querySelectorAll(".animate-pulse").length).toBeGreaterThan(0);
  });

  it("renders BlindboxListSkeleton", () => {
    const { container } = render(<BlindboxListSkeleton />);
    expect(container.querySelectorAll(".animate-pulse").length).toBeGreaterThan(0);
  });
});