"use client";

import { useEffect, useState, useSyncExternalStore } from "react";
import { getImageUrl, PRODUCT_PLACEHOLDER_SVG } from "@/lib/imageUrl";
import { LensThumb } from "../dashboard/icons";

interface ProductImageProps {
  src?: string | null;
  alt?: string;
  className?: string;
  fallback?: React.ReactNode;
}

const emptySubscribe = () => () => {};

export default function ProductImage({
  src,
  alt = "",
  className = "h-8 w-8 flex-shrink-0 rounded-lg border border-[#E4E7EC] object-cover",
  fallback,
}: ProductImageProps) {
  const mounted = useSyncExternalStore(
    emptySubscribe,
    () => true,
    () => false
  );
  const [hasError, setHasError] = useState(false);

  useEffect(() => {
    setHasError(false);
  }, [src]);

  const resolved = mounted && src ? getImageUrl(src) : null;

  if (!resolved || hasError) {
    return <>{fallback ?? <LensThumb className="shrink-0" />}</>;
  }

  return (
    // eslint-disable-next-line @next/next/no-img-element
    <img
      src={resolved}
      alt={alt}
      className={className}
      onError={() => setHasError(true)}
    />
  );
}