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

interface ChatMessageProps {
  message: ChatMessage;
}

export const ChatMessageComponent: React.FC<ChatMessageProps> = ({ message }) => {
  const { user } = useAuthStore();
  const isMe = user?.id === parseInt(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>
  );
};