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

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

const NavbarTabDesktop = ({
  tab,
  onClick,
  isSelected = false,
}: NavbarTabProps) => {
  return (
    <button
      className="px-[45px] text-[#73787C] hover:text-black relative w-fit h-full"
      onClick={() => onClick(tab)}
    >
      <div
        className={`border-b-2 h-full flex items-center transition-all duration-300 text-[45px] ${
          isSelected
            ? "border-b-[#00BED7]"
            : "border-b-transparent hover:border-b-[#E2E2DC] active:border-b-[#00BED7]"
        }`}
      >
        {tab.value}
      </div>
      {tab.count !== 0 && (
        <div className="absolute top-[24px] right-0 w-[38.4px] h-[38.4px] bg-[#00BED7] rounded-full text-white text-[24px] flex items-center justify-center pt-[0.5] pr-[1px]">
          <span className="leading-none">{tab.count}</span>
        </div>
      )}
    </button>
  );
};

export default NavbarTabDesktop;
