'use client';

/**
 * Reaction badges for a message bubble.
 */

import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import type { MessageWithMeta } from '@/contexts';

interface MessageReactionsProps {
  message: MessageWithMeta;
  onReaction: (emoji: string) => void;
}

export function MessageReactions({ message, onReaction }: MessageReactionsProps) {
  if ((message.reactions?.length ?? 0) === 0) return null;

  return (
    <div className="flex flex-wrap items-center gap-1">
      {message.reactions!.map((r) => (
        <Button
          key={r.emoji}
          variant="ghost"
          size="sm"
          onClick={() => onReaction(r.emoji)}
          className={cn(
            'h-6 gap-1 rounded-full px-2 text-xs transition-colors',
            r.reacted_by_me
              ? 'border border-primary/50 bg-primary/10 text-primary hover:bg-primary/20'
              : 'border border-border bg-muted/20 text-muted-foreground hover:bg-muted/40',
          )}
        >
          <span>{r.emoji}</span>
          <span className="font-medium">{r.count}</span>
        </Button>
      ))}
    </div>
  );
}
