import React from 'react';
import { ChatMessage } from '../store/chatStore';
import { useAuthStore } from '@/stores/auth';
import { cn } from '@/lib/utils';

interface ChatMessageProps {
  message: ChatMessage;
}

export const ChatMessageComponent: React.FC<ChatMessageProps> = ({
  message,
}) => {
  const { user } = useAuthStore();
  const isMe = String(user?.id) === String(message.sender_id);

  return (
    <div
      className={cn(
        'flex items-start gap-3 p-2 rounded-lg max-w-[80%] my-1',
        isMe
          ? 'ml-auto bg-blue-500 text-white'
          : 'mr-auto bg-gray-200 text-gray-800',
      )}
    >
      <div className="flex flex-col">
        <div className="flex items-center gap-2">
          <span className="font-semibold text-sm">
            {isMe
              ? 'Moi'
              : message.sender_username || `Utilisateur ${message.sender_id}`}
          </span>
          <span className="text-xs opacity-75">
            {new Date(message.created_at).toLocaleTimeString()}
          </span>
        </div>
        <p className="text-sm">{message.content}</p>
      </div>
    </div>
  );
};