frontend/src/components/interview/MessageBubble.tsx

import type { Message } from '../../types'

interface Props {
  message: Message
}

export default function MessageBubble({ message }: Props) {
  const isAI = message.role === 'ai'

  return (
    <div className={`flex ${isAI ? 'justify-start' : 'justify-end'}`}>
      <div
        className={`max-w-[75%] rounded-2xl px-4 py-3 text-sm leading-relaxed whitespace-pre-wrap ${
          isAI
            ? 'bg-gray-800 text-white rounded-tl-sm'
            : 'bg-indigo-600 text-white rounded-tr-sm'
        }`}
      >
        {message.content}
      </div>
    </div>
  )
}