import { useState } from "react";
import { isMobile } from "react-device-detect";
import { Tab } from "../../../types/tab";
import NavbarDesktop from "./NavbarDesktop";
import NavbarMobile from "./NavbarMobile";

const Navbar = () => {
  const [selectedTab, setSelectedTab] = useState<Tab | null>(null);
  const onTabClick = (tab: Tab) => {
    setSelectedTab(tab);
  };

  return (
    <>
      {isMobile ? (
        <NavbarMobile selectedTab={selectedTab} onTabClick={onTabClick} />
      ) : (
        <NavbarDesktop selectedTab={selectedTab} onTabClick={onTabClick} />
      )}
    </>
  );
};

export default Navbar;
