import { tabs } from "../../../consts/tabs";
import { Tab } from "../../../types/tab";
import NavbarTab from "../NavbarTab";

interface NavbarProps {
  selectedTab: Tab | null;
  onTabClick: (tab: Tab) => void;
}

const NavbarMobile = ({ selectedTab, onTabClick }: NavbarProps) => (
  <nav
    className={`text-[#73787C] self-center justify-center flex w-full flex-col items-center`}
  >
    {tabs.map((tab) => (
      <NavbarTab
        key={tab.id}
        tab={tab}
        isSelected={selectedTab?.id === tab.id}
        onClick={onTabClick}
      />
    ))}
  </nav>
);

export default NavbarMobile;
