import React from "react";

/**
 * Dashboard metric. Big mono value, label, optional delta + icon.
 */
export function Stat({ label, value, unit, delta = null, deltaTone = "neutral", icon = null, style = {} }) {
  const dc = { up: "var(--status-ok)", down: "var(--status-error)", neutral: "var(--text-secondary)" };
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "8px", ...style }}>
      <div style={{ display: "flex", alignItems: "center", gap: "7px" }}>
        {icon && <span style={{ display: "inline-flex", color: "var(--text-disabled)" }}>{icon}</span>}
        <span style={{ font: "var(--weight-medium) var(--text-xs)/1 var(--font-sans)", letterSpacing: "0.03em", color: "var(--text-secondary)" }}>{label}</span>
      </div>
      <div style={{ display: "flex", alignItems: "baseline", gap: "6px" }}>
        <span style={{ font: "var(--weight-semibold) var(--text-2xl)/1 var(--font-mono)", color: "var(--text-primary)", letterSpacing: "-0.01em", fontVariantNumeric: "tabular-nums" }}>{value}</span>
        {unit && <span style={{ font: "var(--text-sm)/1 var(--font-sans)", color: "var(--text-disabled)" }}>{unit}</span>}
        {delta != null && (
          <span style={{ marginLeft: 2, font: "var(--weight-medium) var(--text-xs)/1 var(--font-mono)", color: dc[deltaTone] }}>{delta}</span>
        )}
      </div>
    </div>
  );
}