"use client"

import { useState } from "react"
import type React from "react"

type FallbackImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
  fallbackSrc?: string
}

export default function FallbackImage({
  src,
  fallbackSrc,
  onError,
  ...props
}: FallbackImageProps) {
  const [currentSrc, setCurrentSrc] = useState(src)
  const [hidden, setHidden] = useState(!src && !fallbackSrc)

  if (hidden) return null

  return (
    <img
      {...props}
      src={currentSrc || fallbackSrc}
      onError={(event) => {
        onError?.(event)
        if (fallbackSrc && currentSrc !== fallbackSrc) {
          setCurrentSrc(fallbackSrc)
          return
        }
        setHidden(true)
      }}
    />
  )
}