// js/components/widgets/insights/KCard.jsx
// [REFACTOR Wave 1 PR1 — 2026-05-14] Unificado: versão SUPERSET de Insights.jsx L290-300
// (inclui prop opcional `trendVal` ausente em ProdutosInsightsTab.jsx L26-35).
// trendVal é backward-compat: undefined → condicional `{trendVal!==undefined&&...}` resulta
// em false → não renderiza nada extra → comportamento idêntico ao ProdutosInsightsTab antes.
// Callers: Insights.jsx (~21x) + ProdutosInsightsTab.jsx (~12x) via window.ZNX.widgets.KCard.
(function() {
  'use strict';

  function KCard({label,value,sub,color='#2563EB',trendVal}){
    return(
      <div className="stat-card" style={{position:'relative',overflow:'hidden',paddingLeft:18}}>
        <div style={{position:'absolute',top:0,left:0,width:4,height:'100%',background:color,borderRadius:'10px 0 0 10px'}}/>
        <div className="stat-label">{label}</div>
        <div className="stat-value" style={{fontSize:17,color}}>{value}</div>
        {sub&&<div style={{fontSize:11,color:'#9CA3AF',marginTop:2}}>{sub}</div>}
        {trendVal!==undefined&&<div style={{fontSize:11,marginTop:4,color:trendVal>=0?'#16A34A':'#DC2626',fontWeight:600}}>{trendVal>=0?'↑':'↓'} {Math.abs(trendVal).toFixed(1)}% vs mês ant.</div>}
      </div>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.KCard = KCard;
})();