import { render, screen, waitFor } from "@testing-library/react";
import CurrentlyReadingComp from "@/app/components/CurrentlyReading";
import React from "react";

// Mock next-intl completely to avoid ESM issues
jest.mock("next-intl", () => ({
  useTranslations: () => (key: string) => key,
  useLocale: () => "en",
}));

// Mock next/image
jest.mock("next/image", () => ({
  __esModule: true,
  default: (props: React.ImgHTMLAttributes<HTMLImageElement>) => <img {...props} alt={props.alt || ""} />,
}));

describe("CurrentlyReading Component", () => {
  beforeEach(() => {
    global.fetch = jest.fn();
  });

  it("renders skeleton when loading", () => {
    (global.fetch as jest.Mock).mockReturnValue(new Promise(() => {}));
    const { container } = render(<CurrentlyReadingComp />);
    expect(container.querySelector(".animate-pulse")).toBeInTheDocument();
  });

  it("renders a book when data is fetched", async () => {
    const mockBooks = [
      {
        title: "Test Book",
        authors: ["Test Author"],
        image: "/test.jpg",
        progress: 50,
        startedAt: "2024-01-01"
      },
    ];

    (global.fetch as jest.Mock).mockResolvedValue({
      ok: true,
      json: async () => ({ currentlyReading: mockBooks }),
    });

    render(<CurrentlyReadingComp />);

    await waitFor(() => {
      expect(screen.getByText("Test Book")).toBeInTheDocument();
      expect(screen.getByText("Test Author")).toBeInTheDocument();
    });
  });
});