window.TabBar = function TabBar({ active, counts, onChange }) {
  const tabs = [
    { id: 'staticAds', label: 'Static Ads', icon: 'image' },
    { id: 'autoRemodel', label: 'Auto-Remodel', icon: 'bolt' },
    { id: 'autoSearch', label: 'AutoSearch', icon: 'bolt' },
    { id: 'research', label: 'Manual Search', icon: 'search' },
    { id: 'filter', label: 'Filter', icon: 'filter' },
    { id: 'remodel', label: 'Remodel', icon: 'scroll' },
    { id: 'compliance', label: 'Compliance', icon: 'shield' },
    { id: 'video', label: 'Video-Conversion', icon: 'film' },
  ].filter(tab => tab.id !== 'autoRemodel' || window.RESILIA_UI?.showAutoRemodel === true);
  return (
    <div className="tabbar">
      {tabs.map(t => (
        <button
          key={t.id}
          className={`tab ${active === t.id ? 'active' : ''}`}
          onClick={() => onChange(t.id)}
        >
          <Icon name={t.icon} size={14} />
          {t.label}
          {counts[t.id] !== undefined && <span className="tab-count">{counts[t.id]}</span>}
        </button>
      ))}
    </div>
  );
};