import React from 'react';
import { User, Bot } from 'lucide-react';
import { Message } from '../types';

interface ChatMessageProps {
  message: Message;
  isLoading?: boolean;
}

const ChatMessage: React.FC<ChatMessageProps> = ({ message, isLoading }) => {
  const isModel = message.role === 'model';

  return (
    <div className={`flex ${!isModel ? 'justify-end' : 'justify-start'}`}>
      <div className={`flex max-w-[85%] gap-3 ${!isModel ? 'flex-row-reverse' : 'flex-row'}`}>
        <div className={`w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0 shadow-sm border ${
          !isModel ? 'bg-teal-50 text-teal-600 border-teal-100' : 'bg-slate-50 text-slate-600 border-slate-100'
        }`}>
          {!isModel ? <User size={18} /> : <Bot size={18} />}
        </div>
        <div className={`p-4 rounded-2xl text-sm leading-relaxed shadow-sm ${
          !isModel 
            ? 'bg-teal-600 text-white rounded-tr-none' 
            : 'bg-[#F9FAFB] text-slate-800 rounded-tl-none border border-slate-100'
        }`}>
          {message.text || (isModel && isLoading ? (
            <div className="flex gap-1 items-center">
              <span className="w-1 h-1 bg-slate-400 rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
              <span className="w-1 h-1 bg-slate-400 rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
              <span className="w-1 h-1 bg-slate-400 rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
            </div>
          ) : null)}
        </div>
      </div>
    </div>
  );
};

export default React.memo(ChatMessage);