import type { NavItem, ScreenId } from "../../types/passport";

interface MobileTabBarProps {
  activeScreen: ScreenId;
  navItems: NavItem[];
  onNavigate: (screen: ScreenId) => void;
}

const priorityTabs: Exclude<ScreenId, "onboarding">[] = [
  "dashboard",
  "teams",
  "trivia",
  "stickers",
  "profile",
];

export default function MobileTabBar({ activeScreen, navItems, onNavigate }: MobileTabBarProps) {
  const baseTabs = priorityTabs
    .map((tabId) => navItems.find((item) => item.id === tabId))
    .filter((item): item is NavItem => Boolean(item));

  const activeItem = navItems.find((item) => item.id === activeScreen);
  const visibleTabs =
    activeItem && !baseTabs.some((item) => item.id === activeItem.id)
      ? [activeItem, ...baseTabs.slice(0, 4)]
      : baseTabs;

  return (
    <nav aria-label="Primary mobile tabs" className="mobile-tabbar">
      {visibleTabs.map((item) => (
        <button
          aria-current={activeScreen === item.id ? "page" : undefined}
          className="mobile-tab-button"
          key={item.id}
          onClick={() => onNavigate(item.id)}
          type="button"
        >
          <span aria-hidden="true" className="nav-icon">
            {item.icon}
          </span>
          <span>{item.shortLabel}</span>
        </button>
      ))}
    </nav>
  );
}