Toggle reaction

import { useToggleReaction } from "@sublay/react-js";

function ReactionPicker({
  conversationId,
  messageId,
  reactionCounts,
  userReactions,
}: {
  conversationId: string;
  messageId: string;
  reactionCounts: Record<string, number>;
  userReactions: string[];
}) {
  const toggle = useToggleReaction();

  return (
    <div>
      {["👍", "❤️", "😂", "😮"].map((emoji) => (
        <button
          key={emoji}
          onClick={() => toggle({ conversationId, messageId, emoji })}
          style={{ fontWeight: userReactions.includes(emoji) ? "bold" : "normal" }}
        >
          {emoji} {reactionCounts[emoji] ?? 0}
        </button>
      ))}
    </div>
  );
}