import { ThumbsUp, ThumbsDown } from 'lucide-react';

interface ReactionButtonsProps {
  likes: number;
  dislikes: number;
  userReaction: 'like' | 'dislike' | null | undefined;
  onReact: (reaction: 'like' | 'dislike') => void;
}

export function ReactionButtons({ likes, dislikes, userReaction, onReact }: ReactionButtonsProps) {
  return (
    <div className="flex items-center gap-4">
      <button
        onClick={() => onReact('like')}
        className={`flex items-center gap-2 px-4 py-2 rounded-full transition-colors ${
          userReaction === 'like'
            ? 'bg-blue-100 text-blue-700'
            : 'hover:bg-gray-100 text-gray-600'
        }`}
      >
        <ThumbsUp
          size={18}
          className={userReaction === 'like' ? 'fill-current' : ''}
        />
        <span className="font-medium">{likes}</span>
      </button>

      <button
        onClick={() => onReact('dislike')}
        className={`flex items-center gap-2 px-4 py-2 rounded-full transition-colors ${
          userReaction === 'dislike'
            ? 'bg-red-100 text-red-700'
            : 'hover:bg-gray-100 text-gray-600'
        }`}
      >
        <ThumbsDown
          size={18}
          className={userReaction === 'dislike' ? 'fill-current' : ''}
        />
        <span className="font-medium">{dislikes}</span>
      </button>
    </div>
  );
}