'use client';

import { useState } from 'react';

interface SafeImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
    fallbackSrc?: string;
}

export default function SafeImage({ src, alt, fallbackSrc, ...props }: SafeImageProps) {
    const [imgSrc, setImgSrc] = useState(src);

    const handleError = () => {
        if (imgSrc !== fallbackSrc && fallbackSrc) {
            setImgSrc(fallbackSrc);
        }
    };

    return (
        <img
            src={imgSrc}
            alt={alt}
            onError={handleError}
            {...props}
        />
    );
}