"use client";

import { useEffect, useState } from "react";

type BlogImageProps = {
  src: string;
  alt: string;
  className?: string;
  fallbackSrc?: string;
};

const DEFAULT_BLOG_IMAGE = "/images/hero-bg.jpg";

export default function BlogImage({
  src,
  alt,
  className,
  fallbackSrc = DEFAULT_BLOG_IMAGE,
}: BlogImageProps) {
  const resolvedSrc = src || fallbackSrc;
  const [imageSrc, setImageSrc] = useState(resolvedSrc);

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

  return (
    <img
      src={imageSrc}
      alt={alt}
      className={className}
      onError={() => {
        if (imageSrc !== fallbackSrc) {
          setImageSrc(fallbackSrc);
        }
      }}
    />
  );
}