admin/components/media/FallbackImage.tsx

'use client'

import type { ImageProps } from 'next/image'
import type { SyntheticEvent } from 'react'

import Image from 'next/image'
import { useEffect, useState } from 'react'

type FallbackImageProps = Omit<ImageProps, 'alt' | 'height' | 'src' | 'width'> & {
  alt: string
  src?: string | null
  fallbackSrc: string
  height?: number
  width?: number
}

const FallbackImage = ({ alt, src, fallbackSrc, height = 600, sizes = '100vw', width = 960, onError, ...props }: FallbackImageProps) => {
  const resolvedSrc = src || fallbackSrc
  const [imageSrc, setImageSrc] = useState(resolvedSrc)

  useEffect(() => {
    setImageSrc(resolvedSrc)
  }, [resolvedSrc])

  const handleError = (event: SyntheticEvent<HTMLImageElement>) => {
    if (imageSrc !== fallbackSrc) setImageSrc(fallbackSrc)

    onError?.(event)
  }

  return (
    <Image
      {...props}
      alt={alt}
      height={height}
      sizes={sizes}
      src={imageSrc}
      width={width}
      onError={handleError}
    />
  )
}

export default FallbackImage