'use client'
import  { useEffect, useState } from 'react'
import Image from 'next/image'
import { PlaceHolderImage } from '@/Utils/Other/PlaceholderImage';

const ImageWithFallback = (props: any) => {
    const { src, alt, ...rest } = props;

    const [imgSrc, setImgSrc] = useState<any>(null);

    useEffect(() => {
        setImgSrc(src ? src : PlaceHolderImage)
    }, [src]);

    return (
        <>
            {imgSrc && <Image
                {...rest}
                alt={alt}
                src={imgSrc}
                onError={() => {
                    setImgSrc(PlaceHolderImage)
                }}
                sizes="100vw"
                quality={100}
                overrideSrc={imgSrc}
            />}
        </>
    )
}

export default ImageWithFallback