import { describe, it, expect, vi } from "vitest";
import { render, screen } from "@testing-library/react";
import { ProductRecommendationCarouselCard } from "@/components/showcase/ProductRecommendationCarouselCard";
import React from "react";

// Mock Link
vi.mock("next/link", () => ({
  default: ({ children, href, className }: any) => (
    <a href={href} className={className}>
      {children}
    </a>
  ),
}));

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

describe("ProductRecommendationCarouselCard", () => {
  const defaultProps = {
    ImageLink: "/test-image.jpg",
    ProductName: "Test Product",
    ProductPrice: 29.99,
    ProductId: "prod_123",
  };

  it("is wrapped in React.memo", () => {
    // Check if it's a memo component
    expect((ProductRecommendationCarouselCard as any).$$typeof).toBe(Symbol.for("react.memo"));
    expect(ProductRecommendationCarouselCard.displayName).toBe("ProductRecommendationCarouselCard");
  });

  it("renders correctly with props", () => {
    render(<ProductRecommendationCarouselCard {...defaultProps} />);

    expect(screen.getByText("Test Product")).toBeInTheDocument();

    // Check for price parts to be more robust against locale-specific formatting (e.g. non-breaking spaces)
    const priceText = screen.getByText(/29/).textContent;
    expect(priceText).toContain("29");
    expect(priceText).toContain("99");

    const img = screen.getByAltText("Test Product");
    expect(img).toBeInTheDocument();
    expect(img).toHaveAttribute("src", "/test-image.jpg");

    const link = screen.getByRole("link");
    expect(link).toBeInTheDocument();
    expect(link).toHaveAttribute("href", "/product/prod_123");
  });

  it("returns null if required props are missing", () => {
    const { container } = render(
      <ProductRecommendationCarouselCard
        ImageLink=""
        ProductName=""
        ProductPrice={0}
        ProductId=""
      />
    );
    expect(container.firstChild).toBeNull();
  });
});