import React from 'react';

interface MatchCardImageProps {
  imageUrl: string;
  alt: string;
  className?: string;
}

/**
 * Reusable image component for discovery match cards
 * Handles image loading errors gracefully
 */
export const MatchCardImage: React.FC<MatchCardImageProps> = ({ imageUrl, alt, className }) => {
  const [imageError, setImageError] = React.useState(false);

  if (imageError) {
    return null;
  }

  return (
    <div className={`w-full h-48 bg-muted overflow-hidden ${className || ''}`}>
      <img
        src={imageUrl}
        alt={alt}
        className="w-full h-full object-cover"
        loading="lazy"
        onError={() => setImageError(true)}
      />
    </div>
  );
};

export default React.memo(MatchCardImage);