export default function ChatMessage({ message }) {
  const isBot = message.sender === 'bot'
  
  const formatTime = (date) => {
    return new Date(date).toLocaleTimeString('en-US', {
      hour: 'numeric',
      minute: '2-digit',
      hour12: true,
    })
  }

  return (
    <div
      className={`flex items-start space-x-3 animate-slide-up ${
        isBot ? '' : 'flex-row-reverse space-x-reverse'
      }`}
    >
      <div
        className={`flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center ${
          isBot
            ? 'bg-primary-500'
            : 'bg-gradient-to-br from-purple-500 to-pink-500'
        }`}
      >
        {isBot ? (
          <svg
            className="w-6 h-6 text-white"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
            />
          </svg>
        ) : (
          <svg
            className="w-6 h-6 text-white"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
            />
          </svg>
        )}
      </div>

      <div className="flex-1 max-w-[80%]">
        <div
          className={`rounded-2xl p-4 shadow-md ${
            isBot
              ? 'bg-white dark:bg-gray-800 rounded-tl-none'
              : 'bg-gradient-to-br from-primary-500 to-primary-600 text-white rounded-tr-none'
          }`}
        >
          <p
            className={`text-sm md:text-base leading-relaxed ${
              isBot ? 'text-gray-800 dark:text-gray-200' : 'text-white'
            }`}
          >
            {message.text}
          </p>
        </div>
        <p
          className={`text-xs text-gray-500 dark:text-gray-400 mt-1 ${
            isBot ? 'ml-2' : 'mr-2 text-right'
          }`}
        >
          {formatTime(message.timestamp)}
        </p>
      </div>
    </div>
  )
}