const { useState, useEffect, useRef } = React;
/* ---------- KPI stat ---------- */
function Stat({ label, value, delta, up, spark, sub }) {
  return (
    <div className="card kpi">
      <div className="kpi-top">
        <span className="kpi-label">{label}</span>
        {delta ? (
          <span className={"kpi-delta " + (up ? "pos" : "neg")}>
            <Icon name={up ? "upRight" : "downRight"} size={12} stroke={2.2} />{delta}
          </span>
        ) : null}
      </div>
      <div className="kpi-value display">{value}</div>
      <div className="kpi-foot">
        {sub ? <span className="kpi-sub">{sub}</span> : <span></span>}
        {spark ? <Sparkline data={spark} /> : null}
      </div>
    </div>
  );
}


Object.assign(window, { Stat });