window.TabBar = function TabBar({ active, counts, onChange }) {
  const tabs = [
    { id: 'autoRemodel', label: 'Auto-Remodel', icon: 'bolt' },
    { id: 'research', label: 'Research', icon: 'search' },
    { id: 'filter', label: 'Filter', icon: 'filter' },
    { id: 'remodel', label: 'Remodel', icon: 'scroll' },
    { id: 'video', label: 'Video-Conversion', icon: 'film' },
  ];
  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>
  );
};