import React, { memo } from 'react';
import defaultThumb from '../../images/default.png';

function Thumb({ src = defaultThumb, className, style }: { src?: string; className?: string; style?: React.CSSProperties }) {
  const handleImageError = (e) => {
    if (!e.target.src.includes(defaultThumb)) {
      e.target.src = defaultThumb;
    }
  };

  return (
    <div className={className} style={style}>
      <img
        src={src}
        loading="lazy"
        onError={handleImageError}
        style={{ width: '100%', height: '100%', objectFit: 'contain', background: '#171822' }}
        draggable={false}
      />
    </div>
  );
}

export default memo(Thumb);
