'use client'

import type { ChatMessage } from '@/lib/protocol'

function formatTime(timestamp: number): string {
  return new Date(timestamp).toLocaleTimeString([], {
    hour: '2-digit',
    minute: '2-digit',
  })
}

export function MessageBubble({ message }: { message: ChatMessage }) {
  const isUser = message.from === 'user'

  return (
    <div className={`flex ${isUser ? 'justify-end' : 'justify-start'}`}>
      <div
        className={`max-w-[75%] rounded-2xl px-4 py-2.5 ${
          isUser
            ? 'bg-blue-600 text-white'
            : 'border border-slate-200 bg-slate-50 text-slate-900'
        }`}
      >
        <p className="whitespace-pre-wrap text-sm leading-relaxed">
          {message.text}
        </p>
        <p
          className={`mt-1 text-right text-[10px] ${
            isUser ? 'text-blue-200' : 'text-slate-400'
          }`}
        >
          {formatTime(message.timestamp)}
        </p>
      </div>
    </div>
  )
}
