import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faVolumeUp, faCopy, faSync, faStar, faCogs } from '@fortawesome/free-solid-svg-icons';

const ChatMessage = ({ message, isUser }) => {
  return (
    <div className={`flex ${isUser ? 'justify-end' : 'justify-start'} mb-2`}>
      <div className={`flex items-end ${isUser ? 'flex-row-reverse' : 'flex-row'}`}>
        <div className="flex flex-col items-center">
          <div className="w-10 h-10 rounded-full overflow-hidden">
            <img
              src={isUser ? '/public/you.png' : '/public/bot.png'}
              alt={isUser ? 'You' : 'AI Bot'}
              className="w-full h-full object-cover"
            />
          </div>
          <p className="text-xs mt-1">{isUser ? 'You' : 'AI Bot'}</p>
        </div>
        <div className={`p-3 rounded-lg ml-2 max-w-lg ${isUser ? 'bg-blue-600 text-white' : 'bg-gray-300 text-black'}`}>
          <p className="text-sm whitespace-pre-wrap" dangerouslySetInnerHTML={{ __html: message.text }}></p>
          <p className="text-xs mt-1">{message.timestamp}</p>
          {!isUser && (
            <div className="flex mt-2 space-x-2">
              <button className="p-1 text-sm bg-white rounded-full hover:bg-gray-200">
                <FontAwesomeIcon icon={faVolumeUp} />
              </button>
              <button className="p-1 text-sm bg-white rounded-full hover:bg-gray-200">
                <FontAwesomeIcon icon={faCopy} />
              </button>
              <button className="p-1 text-sm bg-white rounded-full hover:bg-gray-200">
                <FontAwesomeIcon icon={faSync} />
              </button>
              <button className="p-1 text-sm bg-white rounded-full hover:bg-gray-200">
                <FontAwesomeIcon icon={faStar} />
              </button>
              <button className="p-1 text-sm bg-white rounded-full hover:bg-gray-200">
                <FontAwesomeIcon icon={faCogs} />
              </button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default ChatMessage;