interface Props {
  label: string;
  value: string;
  unit?: string;
  delta?: { value: string; positive?: boolean | null };
  hint?: string;
}

export function KpiCard({ label, value, unit, delta, hint }: Props) {
  const deltaColor =
    delta?.positive === true
      ? "#0a7a3a"
      : delta?.positive === false
        ? "#b3261e"
        : "#5b6066";

  return (
    <div
      style={{
        background: "#fff",
        border: "1px solid #e6e8ec",
        borderRadius: 12,
        padding: "16px 18px",
        minWidth: 180,
        flex: 1,
      }}
    >
      <div
        style={{
          fontSize: 12,
          textTransform: "uppercase",
          color: "#5b6066",
          letterSpacing: 0.4,
        }}
      >
        {label}
      </div>
      <div
        style={{
          marginTop: 6,
          display: "flex",
          alignItems: "baseline",
          gap: 6,
        }}
      >
        <span style={{ fontSize: 28, fontWeight: 600, color: "#111" }}>
          {value}
        </span>
        {unit ? (
          <span style={{ color: "#5b6066", fontSize: 14 }}>{unit}</span>
        ) : null}
      </div>
      {delta ? (
        <div style={{ marginTop: 4, fontSize: 13, color: deltaColor }}>
          {delta.value}
        </div>
      ) : null}
      {hint ? (
        <div style={{ marginTop: 6, fontSize: 12, color: "#73767e" }}>
          {hint}
        </div>
      ) : null}
    </div>
  );
}