arjmand-pharmacy/components/Placeholder.tsx

"use client";

import { useEffect, useRef, useState } from "react";

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

export function Placeholder({ src, fallbackSrc, alt = "", className }: PlaceholderProps) {
  const [current, setCurrent] = useState(src);
  const failed = useRef(false);

  useEffect(() => {
    failed.current = false;
    setCurrent(src);
  }, [src]);

  return (
    // eslint-disable-next-line @next/next/no-img-element
    <img
      src={current}
      alt={alt}
      className={className}
      onError={() => {
        if (failed.current || !fallbackSrc || fallbackSrc === current) return;
        failed.current = true;
        setCurrent(fallbackSrc);
      }}
    />
  );
}