import Link from "next/link";
import style from "./navbarAccount.module.css";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { useWindowSize } from "@/customHook/useWindowSize";
import {
  Home,
  ManageAccounts,
  Markunread,
  RemoveShoppingCart,
  ShoppingBag,
} from "@mui/icons-material";

const NavbarAccount = () => {
  const router = useRouter();
  const { width } = useWindowSize();
  const [menu] = useState([
    { name: "My Orders", path: "/account/orders", icon: <ShoppingBag /> },
    { name: "Return", path: "/account/returned", icon: <RemoveShoppingCart /> },
    { name: "Address", path: "/account/address", icon: <Markunread /> },
    { name: "Profile", path: "/account/profile", icon: <ManageAccounts /> },
  ]);
  return (
    <div className={style.navbar}>
      <ul>
        {menu.map((item) => (
          <Link href={item.path} key={item.name}>
            <li className={router.pathname == item.path ? style.active : ""}>
              {item.icon}
              {item.name}
            </li>
          </Link>
        ))}
      </ul>
    </div>
  );
};

export default NavbarAccount;
