"use client";

import { useState, useCallback } from "react";

interface RestaurantImageProps {
  src: string;
  alt: string;
  className?: string;
  draggable?: boolean;
  style?: React.CSSProperties;
  onAnimationEnd?: () => void;
}

export default function RestaurantImage({
  src,
  alt,
  className = "",
  draggable,
  style,
  onAnimationEnd,
}: RestaurantImageProps) {
  const [failed, setFailed] = useState(false);

  const handleError = useCallback(() => setFailed(true), []);

  if (failed) {
    return (
      <div
        className={`flex items-center justify-center bg-elevated ${className}`}
        style={style}
      >
        <img
          src="/restaurant-fallback.png"
          alt={alt}
          className="h-1/2 w-1/2 max-h-20 max-w-20 object-contain opacity-60"
          draggable={false}
        />
      </div>
    );
  }

  return (
    <img
      src={src}
      alt={alt}
      className={className}
      draggable={draggable}
      style={style}
      referrerPolicy="no-referrer"
      onError={handleError}
      onAnimationEnd={onAnimationEnd}
    />
  );
}
