pulsenode/components/widgets/StatusDot.tsx

import type { DockerContainerResult } from "@/lib/types/widget-result";

interface Props {
  status?: DockerContainerResult["status"];
  health?: DockerContainerResult["health"];
}

function resolveColorClass(status?: Props["status"], health?: Props["health"]): string {
  if (!status) return "bg-fg-muted";
  if (health === "unhealthy") return "bg-status-down";
  if (health === "starting") return "bg-status-degraded";
  if (status === "running") return "bg-status-up";
  if (status === "restarting") return "bg-status-degraded";
  return "bg-status-down";
}

function isHealthy(status?: Props["status"], health?: Props["health"]): boolean {
  return status === "running" && health !== "unhealthy" && health !== "starting";
}

export function StatusDot({ status, health }: Props) {
  const label = status ? `${status}${health && health !== "none" ? ` (${health})` : ""}` : "unknown";
  const pulse = isHealthy(status, health) ? "status-pulse" : "";

  return (
    <span
      className={`h-2.5 w-2.5 shrink-0 rounded-full ${resolveColorClass(status, health)} ${pulse}`}
      title={label}
    />
  );
}