import { useEffect, useState } from "react";
import { Users } from "lucide-react";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { presenceService } from "@/services/api/presence";
import { cn } from "@/lib/utils";

export function LiveUserBadge({ compact }: { compact?: boolean }) {
  const [count, setCount] = useState(presenceService.current());
  useEffect(() => presenceService.subscribe(setCount), []);
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <div className={cn("flex items-center gap-1.5 rounded-md border border-border bg-surface/60 px-2 py-1.5 text-xs", compact && "px-2")}>
            <div className="relative">
              <Users className="h-3.5 w-3.5 text-secondary" />
              <span className="absolute -right-0.5 -top-0.5 h-1.5 w-1.5 rounded-full bg-success">
                <span className="absolute inset-0 animate-ping rounded-full bg-success/60" />
              </span>
            </div>
            <span className="font-mono font-semibold tabular-nums">{count.toLocaleString()}</span>
            {!compact && <span className="text-muted-foreground">online</span>}
          </div>
        </TooltipTrigger>
        <TooltipContent>Website users online — not in-game players</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}