// js/components/widgets/Tabs.jsx
// [REFACTOR Wave 3 #528 — 2026-05-15] Unify 4 TabBar duplicates cross-file:
// - Vendas.jsx L406-438 MainTabBar (5 tabs, state mainTab)
// - Produtos.jsx L691-718 TabBar (3 tabs, state activeTab)
// - Clientes.jsx L504-533 TabBar (3 tabs, state activeTab, sem tip)
// - Orcamentos.jsx L939-965 inline JSX (4 tabs, state mainTab)
//
// SUPERSET props: { tabs:[{id,label,count,disabled?,tip?}], active:string, onChange:fn }
// Backward-compat 100%: Clientes (sem tip) → title='' (browser não mostra tooltip).
// Orcamentos (sem paddingBottom:0 explícito) → 0 default CSS (zero regressão visual).
// Path A: hex hardcode inline (#C8A951, #FFFBEB, #92700A, #374151, #D1D5DB, #9CA3AF, #E5E7EB).
(function() {
  'use strict';

  function Tabs({tabs, active, onChange}){
    return(
      <div style={{display:'flex',gap:6,marginBottom:18,borderBottom:'1px solid #E5E7EB',paddingBottom:0}}>
        {tabs.map(t=>{
          const isActive=active===t.id;
          return(
            <button key={t.id} onClick={()=>{if(!t.disabled)onChange(t.id);}}
              disabled={t.disabled} title={t.tip||''}
              style={{
                padding:'9px 18px',border:'none',
                borderBottom:isActive?'3px solid #C8A951':'3px solid transparent',
                background:isActive?'#FFFBEB':'transparent',
                color:t.disabled?'#D1D5DB':isActive?'#92700A':'#374151',
                fontWeight:isActive?700:500,fontSize:13,
                cursor:t.disabled?'not-allowed':'pointer',
                borderRadius:'6px 6px 0 0',transition:'all .15s'
              }}>
              {t.label} <span style={{color:'#9CA3AF',fontWeight:500,marginLeft:4}}>({t.count})</span>
            </button>
          );
        })}
      </div>
    );
  }

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