frontend/src/components/ai-tutor/MessageBubble.tsx

import React from 'react';

const MessageBubble = ({ content, role, timestamp }) => (
  <div className={`flex ${role === 'user' ? 'justify-end' : 'justify-start'} mb-4`}>
    <div className={`max-w-[80%] rounded-lg p-4 ${
      role === 'user' 
        ? 'bg-blue-500 text-white' 
        : 'bg-gray-100 text-gray-900'
    }`}>
      <div className="text-sm">{content}</div>
      <div className="text-xs mt-1 opacity-70">
        {new Date(timestamp).toLocaleTimeString()}
      </div>
    </div>
  </div>
);

export default MessageBubble;