import Link from "next/link";
import { useRouter } from "next/router";
import { DashboardIcon, RateQuotesIcon, CarriersIcon } from "./icons";
import Image from "next/image";
import thumbgroup from "../../../public/images/thumborgs.svg";
import useAuthProvider from "@/useAuthProvider";
import { useSession } from "next-auth/react";
const NavItem = ({ path, icon, text }) => {
  const { asPath } = useRouter();
  return (
    <li className={`${asPath.includes(path) ? "active" : ""}`}>
      <Link href={path} aria-expanded="false">
        <span>{icon}</span>
        <span className="nav-text">{text}</span>
      </Link>
    </li>
  );
};

const Customer = () => {
  const dashboardIcon = <DashboardIcon />;

  const rateQuotesIcon = <RateQuotesIcon />;

  const carriersIcon = <CarriersIcon />;

  const customersIcon = (
    <Image src={thumbgroup} style={{ width: "32px", height: "32px" }} alt="" />
  );
  const { Permission: userData } = useAuthProvider();
  const authUserType: any = useSession();
  return (
    <>
      <NavItem path="/dashboard" icon={dashboardIcon} text="Dashboard" />
      <NavItem path="/rate-quotes" icon={rateQuotesIcon} text="Rate Quotes" />
      {userData?.CarrierView ? <NavItem path="/carriers" icon={carriersIcon} text="Carriers" />:""}  
      {userData?.ViewCustomerTab ? <NavItem path="/customers" icon={customersIcon} text="Customers" /> : ""}
      {authUserType?.data?.user?.is_premium ? <NavItem path="/bulk-import" icon={rateQuotesIcon} text="Bulk Import" /> : ""}
    </>
  );
};

export default Customer;