'use client';

import React from 'react';
import type { ControlCenterMessage } from '@/types/control-center';
import { cn } from '@/lib/utils';

interface UserMessageBubbleProps {
  message: ControlCenterMessage;
}

export const UserMessageBubble: React.FC<UserMessageBubbleProps> = ({
  message,
}) => {
  return (
    <div className="flex justify-end">
      <div className="max-w-[75%] space-y-1">
        {/* Message Bubble */}
        <div
          className={cn(
            'bg-indigo-600 text-white rounded-2xl rounded-tr-md px-4 py-3',
            'shadow-[6px_6px_12px_rgba(79,70,229,0.25),-4px_-4px_8px_rgba(255,255,255,0.15)]',
            'transition-all duration-300'
          )}
        >
          <p className="text-sm leading-relaxed whitespace-pre-wrap">
            {message.content}
          </p>
        </div>

        {/* Timestamp */}
        <div className="text-xs text-gray-400 text-right px-1">
          {new Date(message.createdAt).toLocaleTimeString([], {
            hour: '2-digit',
            minute: '2-digit',
          })}
        </div>
      </div>
    </div>
  );
};

export default UserMessageBubble;