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

const tabs: Tab[] = [
  {
    value: "Masterplan",
    id: "1",
    count: 0,
  },
  {
    value: "Search",
    id: "2",
    count: 0,
  },
  {
    value: "Favorites",
    id: "3",
    count: 3,
  },
  {
    value: "Company",
    id: "4",
    count: 0,
  },
];

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} />
      )}
    </>
  );
};

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

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

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 Navbar;
