'use client';

import type { ChatMessageReaction } from '@/lib/api';
import { cn } from '@/lib/utils';

interface ChatMessageReactionsProps {
  reactions?: ChatMessageReaction[];
  onToggle?: (emoji: string) => void;
  compact?: boolean;
}

export function ChatMessageReactions({ reactions, onToggle, compact }: ChatMessageReactionsProps) {
  if (!reactions?.length) return null;

  return (
    <div className={cn('flex flex-wrap gap-1', compact ? 'mt-1' : 'mt-1.5')}>
      {reactions.map((reaction) => (
        <button
          key={reaction.emoji}
          type="button"
          onClick={() => onToggle?.(reaction.emoji)}
          className={cn(
            'inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs transition',
            reaction.reactedByMe
              ? 'border-[#3390ec]/40 bg-[#3390ec]/15 text-[#1f2430]'
              : 'border-[#dce3ec] bg-white/80 text-[#667085] hover:bg-white'
          )}
        >
          <span>{reaction.emoji}</span>
          <span>{reaction.count}</span>
        </button>
      ))}
    </div>
  );
}