import React from 'react';

type Emoji = {
  native: string;
  unified: string;
};
type Reaction = {
  native: string;
  unified: string;
  userName: string;
};
/**
 *
 * A component to group user selected emojis and display them.
 *
 * ![Screenshot](https://github.com/bigbinary/neeto-ui/assets/10956193/576abbd2-dd08-4535-a120-1e9b295850fb|height=200|width=300)
 *
 * @example 
 *
 * import EmojiReactions from "@bigbinary/neeto-molecules/EmojiReactions";
 * const EmojiReactionsContainer = () => {
 *   const [reactions, setReactions] = useState([
 *     { native: "😃", unified: "1f603", userName: "User 1" },
 *     { native: "😄", unified: "1f604", userName: "User 1" },
 *   ]);
 * 
 *   const createReaction = emoji => ({
 *     native: emoji.native,
 *     unified: emoji.unified,
 *     userName: user.name,
 *     userId: user.id,
 *   });
 * 
 *   const onReactionClick = emoji => {
 *     const reaction = findBy(
 *       { unified: emoji.unified, userId: user.id },
 *       reactions
 *     );
 *     if (reaction) {
 *       setReactions(reactions.filter(item => item.unified !== reaction.unified));
 *     } else {
 *       setReactions([...reactions, createReaction(emoji)]);
 *     }
 *   };
 * 
 *   return (
 *     <div>
 *       <EmojiReactions {...{ onReactionClick, reactions }} />
 *     </div>
 *   );
 * };
 * @endexample
*/
declare const EmojiReactions: React.FC<{
  reactions: Reaction[];
  onReactionClick?: (emoji: Emoji) => void;
  emojiSize?: string;
  emojiBoxStyle?: string;
  isUpdating?: boolean;
}>;

export { EmojiReactions as default };