"use client";

import { useState, useCallback } from "react";
import { UtensilsCrossed } from "lucide-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}
      >
        <UtensilsCrossed className="h-1/3 w-1/3 max-h-8 max-w-8 text-muted/40" strokeWidth={1.5} />
      </div>
    );
  }

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