import PropTypes from 'prop-types';

/**
 * Image component with error handling fallback
 */
export default function ImageWithFallback({ 
  src, 
  alt, 
  className = '', 
  containerClassName = '',
  onError
}) {
  const handleError = (e) => {
    e.target.style.display = 'none';
    if (onError) {
      onError(e);
    }
  };

  if (!src) return null;

  return (
    <div className={containerClassName}>
      <img
        src={src}
        alt={alt}
        className={className}
        onError={handleError}
      />
    </div>
  );
}

ImageWithFallback.propTypes = {
  src: PropTypes.string,
  alt: PropTypes.string.isRequired,
  className: PropTypes.string,
  containerClassName: PropTypes.string,
  onError: PropTypes.func,
};