import { FC } from "react";
import { Link } from "react-router-dom";
import { clx } from "../../helpers/utils";
import { canAccessMenuItem } from "../../helpers/permissions";
import { useGetAdminPermissions } from "../../pages/users/hooks/useUserData";

type Props = {
  title: string;
  isActive: boolean;
  link: string;
  isLogout?: boolean;
  activeName?: string;
  activeNames?: readonly string[];
};

const SubMenuItem: FC<Props> = (props: Props) => {
  const { data: adminPermissions } = useGetAdminPermissions();

  if (!canAccessMenuItem(adminPermissions?.data?.permissions, props.activeName, props.activeNames)) {
    return null;
  }

  return (
    <Link
      to={props.link}
      className={clx("flex text-xs gap-6 mt-1")}
    >
      <div className={clx("w-1 bg-black h-6", !props.isActive && "invisible")}></div>
      <div className={clx("flex gap-3 items-center mt-1")}>
        <div className={props.isActive ? "text-black" : "text-description"}>{props.title}</div>
      </div>
    </Link>
  );
};

export default SubMenuItem;
