// ============================================================================
// public/shell/mobile-tabbar.jsx — Bottom nav for mobile viewports
// ----------------------------------------------------------------------------
// Shows up to 4 most-important items + a "More" button that opens the full
// sidebar drawer. The selection of "important" items is the first item from
// each nav section.
// ============================================================================

function MobileTabBar({ nav, route, go, onMore }) {
  const tabs = [];
  nav.forEach((section) => section.items.forEach((it) => tabs.length < 4 && tabs.push(it)));

  return (
    <nav className="mobile-tabbar">
      {tabs.slice(0, 4).map((item) => (
        <button
          key={item.id}
          className={`tab-btn ${route === item.id ? "active" : ""}`}
          onClick={() => go(item.id)}
        >
          <item.icon size={20}/>
          <span>{item.label}</span>
          {item.live && <span className="live-dot"/>}
        </button>
      ))}
      <button className="tab-btn more" onClick={onMore} title="More">
        <I.more size={20}/>
        <span>More</span>
      </button>
    </nav>
  );
}

window.MobileTabBar = MobileTabBar;