import React, { useEffect, useState } from 'react';

interface ClickableMascotProps { // Renamed from ShoominionProps
  id: string;
  x: number;
  y: number;
  multiplierBonus: number;
  imageSrc: string; // New: Source for the mascot image
  onClick: (id: string, multiplierBonus: number) => void;
  onRemove: (id: string) => void;
}

export const ClickableMascot: React.FC<ClickableMascotProps> = ({ // Renamed from Shoominion
  id,
  x,
  y,
  multiplierBonus,
  imageSrc, // Destructure new prop
  onClick,
  onRemove,
}) => {
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsVisible(false);
      // Give some time for fade-out animation before actual removal
      setTimeout(() => onRemove(id), 500); 
    }, 8000); // Mascot disappears after 8 seconds if not clicked

    return () => clearTimeout(timer);
  }, [id, onRemove]);

  const handleClick = () => {
    setIsVisible(false);
    onClick(id, multiplierBonus);
    // Give some time for fade-out animation before actual removal
    setTimeout(() => onRemove(id), 500);
  };

  return (
    <div
      className={`absolute cursor-pointer transition-opacity duration-500 ${
        isVisible ? 'opacity-100' : 'opacity-0'
      }`}
      style={{
        left: `${x}px`,
        top: `${y}px`,
        transform: 'translate(-50%, -50%)', // Center the image on the coordinates
        zIndex: 30, // Ensure it's above other elements but below popups
      }}
      onClick={handleClick}
    >
      <img
        src={imageSrc} // Use imageSrc prop
        alt="Clickable Mascot" // Updated alt text
        className="w-24 h-24 animate-bounce-slow"
      />
    </div>
  );
};
