import { ImageOff } from "lucide-react";
import { useEffect, useState } from "react";

type BubbleImageProps = {
  src: string | undefined;
  className?: string;
  loading?: "lazy" | "eager";
};

/**
 * Thumbnail <img> for message bubbles. Renders with an empty alt (decorative)
 * and, if the asset fails to load, falls back to a neutral placeholder instead
 * of the browser's broken-image box — which would otherwise expose the raw
 * file name via alt text.
 */
export function BubbleImage({ src, className, loading }: BubbleImageProps) {
  const [failed, setFailed] = useState(false);

  // Reset when the source changes so a reused element re-attempts the new src.
  useEffect(() => {
    setFailed(false);
  }, [src]);

  if (!src || failed) {
    return (
      <div
        className={`flex items-center justify-center bg-gradient-to-br from-neutral-800 to-neutral-900 ${
          className ?? ""
        }`}
        aria-hidden
      >
        <ImageOff className="h-8 w-8 text-neutral-600" />
      </div>
    );
  }

  return (
    <img
      src={src}
      alt=""
      loading={loading}
      className={className}
      onError={() => setFailed(true)}
    />
  );
}