import { describe, it, expect, vi } from "vitest";
import { render, screen } from "@testing-library/react";
import React from "react";
import { CartItemList } from "@/components/cart/CartItemList";
import { useCartStore } from "@/hooks/useCartStore";
import { TooltipProvider } from "@/components/ui/tooltip";

// Mock the cart store
vi.mock("@/hooks/useCartStore", () => ({
  useCartStore: vi.fn(),
}));

// Mock next/image
vi.mock("next/image", () => ({
  default: (props: any) => (
    // eslint-disable-next-line @next/next/no-img-element
    <img
      src={props.src}
      alt={props.alt}
      data-sizes={props.sizes}
    />
  ),
}));

describe("CartItemList Performance Optimizations", () => {
  const mockItems = [
    { id: "1", name: "Product 1", price: 10, quantity: 1, image: "/img1.jpg" },
    { id: "2", name: "Product 2", price: 20, quantity: 2, image: "/img2.jpg" },
  ];

  it("should render images with sizes for performance", () => {
    // We need to mock the individual selector calls too
    (useCartStore as any).mockImplementation((selector: any) => {
        const state = {
            items: mockItems,
            removeFromCart: vi.fn(),
            updateQuantity: vi.fn(),
            addToCart: vi.fn(),
        };
        return selector(state);
    });

    render(
      <TooltipProvider>
        <CartItemList />
      </TooltipProvider>
    );

    const images = screen.getAllByRole("img");
    expect(images).toHaveLength(2);
    expect(images[0]).toHaveAttribute("data-sizes", "120px");
    expect(images[1]).toHaveAttribute("data-sizes", "120px");
  });
});