// KPI strip. Each kpi may carry an up/warn pill.
function Kpis({ kpis }) {
  return (
    <div className="sec" style={{borderTop:'none', paddingTop:20, marginTop:20}}>
      <div className="kpis">
        {kpis.map((k, i) => (
          <div className="card kpi" key={i}>
            <p className="l">{k.l}</p>
            <p className="v num">{k.v}</p>
            {k.pill && (
              <span className={"pill " + (k.pill.kind === 'warn' ? 'p-warn' : 'p-up')}>
                <TI name={k.pill.icon} size={k.pill.kind === 'warn' ? 11 : 12}/>{k.pill.text}
              </span>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}
window.Kpis = Kpis;