Health heartbeat

import {
  Badge,
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
  Progress,
} from "@paxeer/core";

export function HealthHeartbeat({
  label = "cluster",
  latencyMs = 42,
  uptimePct = 99.4,
}: {
  label?: string;
  latencyMs?: number;
  uptimePct?: number;
}) {
  const healthy = latencyMs < 120;

  return (
    <Card className="gap-3 py-4" data-slot="health-heartbeat">
      <CardHeader className="px-4">
        <CardTitle className="text-[length:var(--md-sys-typescale-label-large-size)]">
          Health heartbeat
        </CardTitle>
        <CardDescription className="font-[family-name:var(--md-ref-typeface-mono)]">
          {label} · {latencyMs}ms
        </CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-3 px-4">
        <div className="flex items-center justify-between gap-2">
          <Badge variant={healthy ? "default" : "destructive"}>
            {healthy ? "live" : "degraded"}
          </Badge>
          <span className="text-[length:var(--md-sys-typescale-label-small-size)] text-on-surface-variant">
            {uptimePct}% uptime
          </span>
        </div>
        <Progress value={Math.min(100, (120 - Math.min(latencyMs, 120)) / 120 * 100)} />
      </CardContent>
    </Card>
  );
}