import React from 'react';
import { usePresence } from '../hooks/usePresence';

export const ActiveUsers: React.FC = () => {
    const { activeUsers } = usePresence();

    // Filter out current user from display if desired, or keep them to show connectivity.
    // The backend `getActiveUsers` optionally excludes self, but let's handle display logic here.
    // Backend logic: _id: { $ne: currentUserId }
    // So activeUsers only contains OTHER users.

    if (activeUsers.length === 0) return null;

    return (
        <div className="flex items-center gap-1">
            <div className="flex -space-x-2 overflow-hidden py-1">
                {activeUsers.map((u) => (
                    <div
                        key={u._id}
                        className="relative inline-block group cursor-help"
                        title={`${u.name} (Online)`}
                    >
                        <div className="w-8 h-8 rounded-full bg-primary/10 border-2 border-surface text-xs font-bold flex items-center justify-center text-primary uppercase shadow-sm">
                            {u.name.charAt(0)}
                        </div>
                        <span className="absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full bg-green-500 ring-2 ring-surface transform translate-y-1/4 translate-x-1/4"></span>

                        {/* Tooltip */}
                        <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 bg-black text-white text-[10px] rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50">
                            {u.name}
                        </div>
                    </div>
                ))}
            </div>
            {activeUsers.length > 3 && (
                <span className="text-[10px] text-text-muted font-bold ml-1">+{activeUsers.length}</span>
            )}
        </div>
    );
};
