'use client';

import { cn } from '@/lib/cn';
import type { Message } from '@/lib/types';

interface MessageBubbleProps {
  message: Message;
}

export function MessageBubble({ message }: MessageBubbleProps): React.ReactElement {
  const isUser = message.role === 'user';

  return (
    <div className={cn('flex', isUser ? 'justify-end' : 'justify-start')}>
      <div
        className={cn(
          'max-w-[75%] rounded-xl px-4 py-3 text-sm',
          isUser
            ? 'bg-blue-600 text-white'
            : 'border border-surface-border bg-surface-elevated text-text-primary',
        )}
      >
        <div className="whitespace-pre-wrap break-words">{message.content}</div>
        <div
          className={cn('mt-1 text-right text-xs', isUser ? 'text-blue-200' : 'text-text-muted')}
        >
          {new Date(message.createdAt).toLocaleTimeString([], {
            hour: '2-digit',
            minute: '2-digit',
          })}
        </div>
      </div>
    </div>
  );
}