import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";
import type { ConnectionState } from "@/hooks/useConnectionStatus";

interface HealthDotProps {
  connectionState: ConnectionState;
}

const healthGlow: Record<ConnectionState, string> = {
  connected:    "0 0 6px 1px hsl(var(--status-success-dot) / 0.4)",
  disconnected: "0 0 6px 1px hsl(var(--status-error-dot) / 0.5)",
  reconnecting: "0 0 6px 1px hsl(var(--status-neutral-dot) / 0.3)",
};

export function HealthDot({ connectionState }: HealthDotProps) {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <span
          className={cn(
            "inline-block h-2 w-2 rounded-full",
            connectionState === "reconnecting" && "bg-status-neutral-dot animate-status-pulse",
            connectionState === "connected" && "bg-status-success-dot",
            connectionState === "disconnected" && "bg-status-error-dot",
          )}
          style={{ boxShadow: healthGlow[connectionState] }}
        />
      </TooltipTrigger>
      <TooltipContent>
        {connectionState === "reconnecting"
          ? "Reconnecting..."
          : connectionState === "connected"
            ? "Server connected"
            : "Server disconnected"}
      </TooltipContent>
    </Tooltip>
  );
}
