import { ThumbsUp } from 'lucide-react';

interface VoteButtonProps {
  optionId: string;
  votes: number;
  onVote: (optionId: string) => void;
  disabled?: boolean;
}

export function VoteButton({ optionId, votes, onVote, disabled = false }: VoteButtonProps) {
  return (
    <button
      onClick={() => !disabled && onVote(optionId)}
      disabled={disabled}
      className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-all duration-200 text-white font-medium ${
        disabled 
          ? 'bg-white/10 cursor-not-allowed opacity-60' 
          : 'bg-white/20 hover:bg-white/30'
      }`}
    >
      <ThumbsUp className="w-4 h-4" />
      <span>{votes}</span>
    </button>
  );
}