export default function MessageBubble({ message, onReplay }) {
  const isUser = message.role === 'user'

  return (
    <div className={`flex ${isUser ? 'justify-end' : 'justify-start'} px-4 py-1.5`}>
      <div className={`flex items-start gap-3 max-w-[80%] ${isUser ? 'flex-row-reverse' : ''}`}>
        {!isUser && (
          <div className="w-8 h-8 rounded-full bg-indigo-600/20 flex items-center justify-center shrink-0 mt-0.5">
            <span className="text-indigo-400 text-sm">AI</span>
          </div>
        )}
        <div>
          <div
            className={`rounded-2xl px-4 py-2.5 text-sm leading-relaxed whitespace-pre-wrap ${
              isUser
                ? 'bg-indigo-600 text-white'
                : message.isError
                  ? 'bg-red-900/40 text-red-200 border border-red-800/50'
                  : 'bg-gray-800 text-gray-100'
            }`}
          >
            {message.content}
          </div>
          {!isUser && !message.isError && onReplay && (
            <button
              onClick={() => onReplay(message.content)}
              className="mt-1 ml-1 text-gray-500 hover:text-indigo-400 transition-colors"
              title="Replay audio"
            >
              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M15.536 8.464a5 5 0 010 7.072M17.95 6.05a8 8 0 010 11.9M6.5 9H4a1 1 0 00-1 1v4a1 1 0 001 1h2.5l4 4V5l-4 4z" />
              </svg>
            </button>
          )}
        </div>
      </div>
    </div>
  )
}