import { jsx, jsxs } from 'react/jsx-runtime';
import { cn } from '../../../utils/cn.js';
import 'react';
import { messageTheme } from './Message.theme.js';

const MessageReactions = ({ reactions, onReactionClick, className, }) => {
    if (!(reactions === null || reactions === void 0 ? void 0 : reactions.length))
        return null;
    return (jsx("div", { className: cn(messageTheme.reactionsContainerStyle, className), children: reactions.map((reaction) => (jsxs("button", { type: "button", onClick: () => onReactionClick === null || onReactionClick === void 0 ? void 0 : onReactionClick(reaction.emoji), className: cn(messageTheme.reactionPillStyle, reaction.reacted && messageTheme.reactionPillActiveStyle), "aria-label": `${reaction.emoji} ${reaction.count}`, children: [jsx("span", { children: reaction.emoji }), jsx("span", { children: reaction.count })] }, reaction.emoji))) }));
};

export { MessageReactions };
