import { cn } from '@/lib/utils';
import { ChangeSetInline } from './ChangeSetInline';
import type { ChatMessage } from '@/hooks/useChatSession';

interface ChatBubbleProps {
  message: ChatMessage;
}

export function ChatBubble({ message }: ChatBubbleProps) {
  const isUser = message.role === 'user';
  const isSystem = message.role === 'system';

  if (isSystem) {
    return (
      <div className="flex justify-center px-4 py-1">
        <span className="text-xs text-muted-foreground italic">{message.content}</span>
      </div>
    );
  }

  return (
    <div className={cn('flex px-4 py-1.5', isUser ? 'justify-end' : 'justify-start')}>
      <div
        className={cn(
          'max-w-[85%] rounded-lg px-3 py-2 text-sm',
          isUser
            ? 'bg-primary/10 text-foreground'
            : 'bg-card border border-border text-foreground',
        )}
      >
        <p className="whitespace-pre-wrap">{message.content}</p>
        {message.changeSetId && <ChangeSetInline changeSetId={message.changeSetId} />}
      </div>
    </div>
  );
}
