import Image from 'next/image'
import React, { useEffect, useState } from 'react'
import BrokenImage from 'assets/broken.png'

function ImageWithFallback({ src, layout, alt }: any) {
    const [imageSrc, setimageSrc] = useState(src)

    useEffect(() => {
        setimageSrc(src)
    }, [src])


    return (
        <>
            <Image src={imageSrc ? imageSrc : BrokenImage} layout={layout} alt={alt} onError={() => {
                setimageSrc(BrokenImage)
            }} placeholder="blur" blurDataURL='/assets/images/preloader/preloader-static6.png' />
        </>
    )
}

export default ImageWithFallback