import React from 'react';
import { Pizza, PlayCircle, Moon, Paintbrush } from 'lucide-react';
import GatherResourcesButton from './GatherResourcesButton';
import { Pet } from '../types/Pet';

interface InteractionMenuProps {
  pet: Pet;
  onFeed: () => void;
  onPlay: () => void;
  onSleep: () => void;
  onCustomize: () => void;
}

export default function InteractionMenu({ pet, onFeed, onPlay, onSleep, onCustomize }: InteractionMenuProps) {
  const ActionButton = ({ icon: Icon, label, onClick, color }: { icon: any; label: string; onClick: () => void; color: string }) => (
    <button
      onClick={onClick}
      className={`flex items-center justify-center space-x-2 bg-${color}-900/30
        hover:bg-${color}-800/50 border-2 border-${color}-500/50 rounded-lg p-4
        transition-all duration-300 transform hover:scale-105 w-full`}
    >
      <Icon className="w-6 h-6" />
      <span>{label}</span>
    </button>
  );

  return (
    <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
      <ActionButton icon={Pizza} label="Feed" onClick={onFeed} color="green" />
      <ActionButton icon={PlayCircle} label="Play" onClick={onPlay} color="blue" />
      <ActionButton icon={Moon} label="Sleep" onClick={onSleep} color="purple" />
      <ActionButton icon={Paintbrush} label="Customize" onClick={onCustomize} color="pink" />
      <div className="col-span-2 md:col-span-3">
        <GatherResourcesButton
          pet={pet}
          onGatherStart={() => console.log('Gathering started')}
          onGatherComplete={() => console.log('Gathering completed')}
        />
      </div>
    </div>
  );
}