import React, { useEffect, useState } from "react";
import Image from "next/image";
import style from "./NextImage.module.css";

const NextImage = (props) => {
  const { src, altImage, className, ...rest } = props;
  const [imgSrc, setImgSrc] = useState("");
  const [isImageFine, setIsImageFine] = useState(true);
  useEffect(() => {
    if (src) setImgSrc(src);
    setIsImageFine(true);
  }, [src]);
  return isImageFine ? (
    <Image
      {...rest}
      src={imgSrc}
      alt={altImage}
      onError={() => {
        setIsImageFine(false);
      }}
      className={props.className ? props.className : style.image}
      fill
    />
  ) : (
    <Image
      {...rest}
      src={require("@/../public/assets/images/dead.png")}
      alt={altImage}
      className={props.className ? props.className : style.err_image}
      fill
    />
  );
};

export default NextImage;
