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: any) => <img {...props} />,
}));

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 = [
      {
        id: "1",
        book_title: "Test Book",
        book_author: "Test Author",
        book_image: "/test.jpg",
        status: "reading",
        rating: 5,
        progress: 50
      },
    ];

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

    render(<CurrentlyReadingComp />);

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