import { FaChevronRight } from "react-icons/fa";
import { cn } from "@/lib/utils";
const NavItem = ({
  selected,
  haveSubMenu,
  children,
  arrayLength,
  destaque,
  ...rest
}: any) => {
  return (
    <div
      className={`cursor-pointer font-bold  select-none items-center w-60 flex justify-center whitespace-nowrap`}
    >
      <li
        className={`h-fit w-full px-2 py-2 rounded-md text-sm overflow-hidden text-ellipsis transition-all ease-linear cursor-pointer
        ${destaque
            ? selected
              ? "bg-primary text-white ring-2 ring-primary/40"
              : "bg-primary text-white hover:bg-opacity-90"
            : selected
              ? "bg-stroke text-black-2 dark:text-white dark:bg-black"
              : "bg-transparent hover:bg-stroke hover:text-black-2"
          }
        `}
        {...rest}
      >
        <div className="flex items-center">
          <span>{children}</span>
          {haveSubMenu && <FaChevronRight size={12} className="ml-auto" />}
        </div>
      </li>
    </div>
  );
};

export default NavItem;