export type MobileTab = 'diagram' | 'bom'

/** Bottom nav for the mobile view-only layout (AppShell) — stands in for
 *  the palette + RightPanel that only fit at `md` and up. Just two views:
 *  there's no editing to switch an Inspector tab for on mobile (see
 *  useCanEdit), so "Diagram" and "Bill of Materials" are the whole set. */
export default function MobileTabBar({ tab, onChange }: { tab: MobileTab; onChange: (tab: MobileTab) => void }) {
  return (
    <nav className="flex h-12 shrink-0 border-t border-slate-200 bg-white md:hidden">
      <button
        onClick={() => onChange('diagram')}
        className={`flex-1 text-xs font-semibold uppercase tracking-wide ${
          tab === 'diagram' ? 'text-indigo-700' : 'text-slate-400'
        }`}
      >
        Diagram
      </button>
      <button
        onClick={() => onChange('bom')}
        className={`flex-1 text-xs font-semibold uppercase tracking-wide ${
          tab === 'bom' ? 'text-indigo-700' : 'text-slate-400'
        }`}
      >
        Bill of Materials
      </button>
    </nav>
  )
}