import { User, Bot } from 'lucide-react';
import type { Message } from '@/atoms/chatAtoms';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

interface MessageItemProps {
  message: Message;
}

export function MessageItem({ message }: MessageItemProps) {
  const isUser = message.role === 'user';

  return (
    <div
      className={`flex gap-4 py-4 px-6 ${
        isUser ? 'bg-gray-50 dark:bg-gray-800/30' : ''
      }`}
    >
      <div className="flex-shrink-0">
        {isUser ? (
          <div className="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
            <User className="w-5 h-5 text-white" />
          </div>
        ) : (
          <div className="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center">
            <Bot className="w-5 h-5 text-white" />
          </div>
        )}
      </div>

      <div className="flex-1 prose prose-sm text-white dark:prose-invert max-w-none">
        {message.image_url && (
          <div className="my-4 -mx-4 sm:mx-0 rounded-lg overflow-hidden">
            <img 
              src={message.image_url} 
              alt="Uploaded or generated content" 
              className="max-w-full h-auto rounded-lg shadow-lg"
              loading="lazy"
            />
          </div>
        )}
        <ReactMarkdown remarkPlugins={[remarkGfm]}>
          {message.content}
        </ReactMarkdown>
      </div>
    </div>
  );
}