import React, { useEffect, ReactElement } from 'react';

interface Props {
  src: string;
  onLoad(): void;
  onError(): void;
}

const loadImage = (
  src: Props['src'],
  onLoad: Props['onLoad'],
  onError: Props['onError'],
): void => {
  const img = document.createElement('img');
  img.onload = onLoad;
  img.onerror = onError;
  img.src = src;
};

export const Img = ({
  src,
  onLoad,
  onError,
}: Props): ReactElement<HTMLImageElement> => {
  useEffect(() => {
    loadImage(src, onLoad, onError);
  }, [onError, onLoad, src]);

  return <img src={src} onLoad={onLoad} onError={onError} />;
};