import React from 'react';

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

  return (
    <div className="flex" style={{
      justifyContent: isUser ? 'flex-end' : 'flex-start',
      marginBottom: '12px',
      padding: '0 16px',
    }}>
      {!isUser && (
        <div className="flex items-center justify-center flex-shrink" style={{
          width: '28px',
          height: '28px',
          borderRadius: '50%',
          background: 'var(--accent)',
          fontSize: '12px',
          fontWeight: 600,
          marginRight: '8px',
          alignSelf: 'flex-end',
        }}>N</div>
      )}

      <div style={{
        maxWidth: '70%',
        padding: '10px 14px',
        borderRadius: isUser ? '18px 18px 4px 18px' : '18px 18px 18px 4px',
        background: isUser ? 'var(--bubble-user)' : 'var(--bubble-ai)',
        color: 'var(--text-primary)',
        fontSize: '14px',
        lineHeight: '1.6',
        border: isUser ? 'none' : '1px solid var(--border)',
        whiteSpace: 'pre-wrap',
        wordBreak: 'break-word',
      }}>
        {message.text}
        {message.streaming && (
          <span style={{
            display: 'inline-block',
            width: '8px',
            height: '14px',
            background: 'var(--text-secondary)',
            marginLeft: '2px',
            borderRadius: 'var(--radius-sm)',
            animation: 'blink 1s step-end infinite',
          }} />
        )}
        {message.error && (
          <div className="text-xs" style={{ marginTop: '6px', color: '#ff6b6b' }}>
            ⚠ Failed to complete response
          </div>
        )}
      </div>
    </div>
  );
}