'use client'
import React, { useEffect, useState, forwardRef } from 'react';
import Image, { ImageProps } from 'next/image';

interface ImageFallbackProps extends Omit<ImageProps, 'alt'> {
    src: any;
    fallbackSrc?: string;
    className?: string;
    alt?: string;
}

const ImageFallback = forwardRef<HTMLImageElement, ImageFallbackProps>(
    (
        {
            src,
            fallbackSrc = "/images/no-image.png",
            alt = "",
            ...rest
        },
        ref
    ) => {
        const getValidSrc = (value: any) => {
            if (
                !value ||
                typeof value !== "string" ||
                value === "undefined" ||
                value.includes("undefined")
            ) {
                return fallbackSrc;
            }

            return value;
        };

        const [imgSrc, setImgSrc] = useState(getValidSrc(src));
        useEffect(() => {
            setImgSrc(getValidSrc(src));
        }, [src, fallbackSrc]);
        return (
            <Image
                {...rest}
                ref={ref}
                src={imgSrc ? imgSrc : '/images/no-image.png'}
                alt={alt}
                loading={rest.priority ? undefined : "lazy"}
                placeholder="blur"
                blurDataURL="/images/blurred.jpeg"
                onError={() => {
                    if (imgSrc !== fallbackSrc) {
                        setImgSrc(fallbackSrc);
                    }
                }}
            />
        );
    }
);

ImageFallback.displayName = 'ImageFallback';

export default ImageFallback;