// import { useState } from "react";
// import { IoIosArrowRoundForward } from "react-icons/io";
import { Link, useLocation } from "react-router-dom";

interface NavLinkProps {
  to: string;
  icon: React.ReactNode;
  label: string;
  showSideBar: boolean;
  menuPathMap: Record<string, string>;
}

// enum TransactionFilterEnum {
//   ALL,
//   DRAFT,
//   SENT,
//   COMPLETE,
//   DECLINED,
//   DISCARDED,
//   CANCELED,
//   EXPIRED
// }

const NavLink: React.FC<NavLinkProps> = ({ to, icon, label, showSideBar, menuPathMap }) => {

  const location = useLocation();
  const isActive = menuPathMap[location.pathname] === label;

  // const [transactionFilter, setTransationFilter] = useState<TransactionFilterEnum>(TransactionFilterEnum.ALL)

  return (
    <>

      <Link
        to={to}
        className={`${isActive ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--sidebarMenuCol)]'} 
      p-2 rounded-md flex justify-left gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
      >
        {icon}
        {showSideBar && <p className="text-[0.8rem]">{label}</p>}
      </Link>

    </>
  );
};

export default NavLink;


// {label === "Transactions" ? <div>
//         <Link
//           to={to + "/all"}
//           className={`${isActive ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'} 
//       p-2 rounded-md flex justify-left gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
//         >
//           {icon}
//           {showSideBar && <p className="text-[0.8rem]">{label}</p>}
//         </Link>

//         <div
//           className={`${showSideBar ? "pl-6" : ""} mt-0.5 overflow-hidden transition-all duration-300 ease-in-out transform ${isActive ? 'max-h-max opacity-100 translate-y-0' : 'max-h-0 opacity-0 -translate-y-2'
//             }`}
//         >
//           <Link
//             to={to + "/all"}
//             className={`px-2 py-1 mt-1 ${transactionFilter === TransactionFilterEnum.ALL ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'} rounded-md flex justify-between gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
//             onClick={() => setTransationFilter(TransactionFilterEnum.ALL)}
//           >
//             {showSideBar && <p className="text-[0.8rem]">All</p>}
//             {transactionFilter === TransactionFilterEnum.ALL && <IoIosArrowRoundForward />}
//           </Link>

//           <Link
//             to={to + "/draft"}
//             className={`px-2 py-1 mt-1 ${transactionFilter === TransactionFilterEnum.DRAFT ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'} rounded-md flex justify-between gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
//             onClick={() => setTransationFilter(TransactionFilterEnum.DRAFT)}
//           >
//             {showSideBar && <p className="text-[0.8rem]">Draft</p>}
//             {transactionFilter === TransactionFilterEnum.DRAFT && <IoIosArrowRoundForward />}
//           </Link>

//           <Link
//             to={to + "/sent"}
//             className={`px-2 py-1 mt-1 ${transactionFilter === TransactionFilterEnum.SENT ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'} rounded-md flex justify-between gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
//             onClick={() => setTransationFilter(TransactionFilterEnum.SENT)}
//           >
//             {showSideBar && <p className="text-[0.8rem]">Sent</p>}
//             {transactionFilter === TransactionFilterEnum.SENT && <IoIosArrowRoundForward />}
//           </Link>

//           <Link
//             to={to + "/complete"}
//             className={`px-2 py-1 my-1 ${transactionFilter === TransactionFilterEnum.COMPLETE ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'} rounded-md flex justify-between gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
//             onClick={() => setTransationFilter(TransactionFilterEnum.COMPLETE)}
//           >
//             {showSideBar && <p className="text-[0.8rem]">Completed</p>}
//             {transactionFilter === TransactionFilterEnum.COMPLETE && <IoIosArrowRoundForward />}
//           </Link>

//           <Link
//             to={to + "/declined"}
//             className={`px-2 py-1 my-1 ${transactionFilter === TransactionFilterEnum.DECLINED ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'} rounded-md flex justify-between gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
//             onClick={() => setTransationFilter(TransactionFilterEnum.DECLINED)}
//           >
//             {showSideBar && <p className="text-[0.8rem]">Declined</p>}
//             {transactionFilter === TransactionFilterEnum.DECLINED && <IoIosArrowRoundForward />}
//           </Link>


//           <Link
//             to={to + "/discarded"}
//             className={`px-2 py-1 my-1 ${transactionFilter === TransactionFilterEnum.DISCARDED ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'} rounded-md flex justify-between gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
//             onClick={() => setTransationFilter(TransactionFilterEnum.DISCARDED)}
//           >
//             {showSideBar && <p className="text-[0.8rem]">Discarded</p>}
//             {transactionFilter === TransactionFilterEnum.DISCARDED && <IoIosArrowRoundForward />}
//           </Link>


//           <Link
//             to={to + "/canceled"}
//             className={`px-2 py-1 my-1 ${transactionFilter === TransactionFilterEnum.CANCELED ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'} rounded-md flex justify-between gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
//             onClick={() => setTransationFilter(TransactionFilterEnum.CANCELED)}
//           >
//             {showSideBar && <p className="text-[0.8rem]">Canceled</p>}
//             {transactionFilter === TransactionFilterEnum.CANCELED && <IoIosArrowRoundForward />}
//           </Link>


//           <Link
//             to={to + "/expired"}
//             className={`px-2 py-1 my-1 ${transactionFilter === TransactionFilterEnum.EXPIRED ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'} rounded-md flex justify-between gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
//             onClick={() => setTransationFilter(TransactionFilterEnum.EXPIRED)}
//           >
//             {showSideBar && <p className="text-[0.8rem]">Expired</p>}
//             {transactionFilter === TransactionFilterEnum.EXPIRED && <IoIosArrowRoundForward />}
//           </Link>


//         </div>
//       </div> :