import React, { useEffect, useState } from 'react';
import { FALLBACK_IMAGE, resolveImageUrl } from '../lib/images';

interface ProductImageProps {
  src?: string | null;
  alt: string;
  className?: string;
  style?: React.CSSProperties;
  priority?: boolean;
}

const ProductImage: React.FC<ProductImageProps> = ({ src, alt, className, style, priority = false }) => {
  const [failed, setFailed] = useState(false);
  const url = failed ? FALLBACK_IMAGE : resolveImageUrl(src);

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

  return (
    <img
      src={url}
      alt={alt}
      className={className}
      style={{ display: 'block', ...style }}
      loading={priority ? 'eager' : 'lazy'}
      decoding="async"
      onError={() => setFailed(true)}
    />
  );
};

export default ProductImage;