import { Tab } from "../../../types/tab";
import RightArrowIcon from "../../icons/RightArrowIcon";

interface NavbarTabProps {
  tab: Tab;
  onClick: (tab: Tab) => void;
  isSelected: boolean;
}

const NavbarTabMobile = ({ tab, onClick }: NavbarTabProps) => {
  return (
    <button
      className="w-full border-b last:border-b-0 flex justify-between py-4 "
      onClick={() => onClick(tab)}
    >
      <div className=" text-[#0D1922] relative w-fit">
        <div className={` transition-all duration-300`}>{tab.value}</div>
        {tab.count !== 0 && (
          <div className="absolute top-0 -right-4 w-4 h-4 bg-[#00BED7] rounded-full text-white text-[10px] flex items-center justify-center">
            {tab.count}
          </div>
        )}
      </div>
      <div className="text-[#73787C]">
        <RightArrowIcon />
      </div>
    </button>
  );
};

export default NavbarTabMobile;