import React from "react";
import {
  onLoad,
} from "../utils";
interface IImage extends React.ImgHTMLAttributes<HTMLImageElement> {
  src: string;
}

const Image = ({
  src,
  ...props
}: IImage) => {
  const [status_image, setStatusImage] = React.useState(true);

  React.useEffect(() => {
    onLoad(src, (event, status) => {
      console.log(event)
      if (status == `error`) setStatusImage(false);
      if (status == `success`) setStatusImage(true);
    });
  }, [src])

  return <div style={{
    height: '100%',
    width: `100%`
  }}>
    <img data-status={status_image} {...props} src={src} />
  </div>
}

export default Image;