import { ReactNode } from "react";

import { StatusBadge } from "@/components/status-badge";

export function MetricCard({
  label,
  value,
  detail,
  tone = "neutral",
}: {
  label: string;
  value: string;
  detail?: ReactNode;
  tone?: "ok" | "warn" | "error" | "neutral" | "live";
}) {
  return (
    <div className="miniMetric">
      <span className="miniMetricLabel">{label}</span>
      <span className="miniMetricValue">{value}</span>
      <StatusBadge label={tone.toUpperCase()} tone={tone} />
      {detail ? <span style={{ color: "var(--text-dim)", fontSize: "0.72rem" }}>{detail}</span> : null}
    </div>
  );
}
