"use client";
import React, { useState } from "react";
// import SideMenu from "../general/SideMenu";
import Teleport from "@/shared/Teleport/Teleport";
import { MenuIcon } from "@/shared/Icons";
import { NavItems, NavLink } from "./NavbarLinks";
import { usePathname } from "next/navigation";

import LocalePath from "@/shared/LocalePath";
import { useTranslations } from "next-intl";
const MobileNav = () => {
  const t = useTranslations();
  const router = usePathname();
  const activeLink = router;
  const cleanPath = (path: string) =>
    path.endsWith("/") ? path.slice(0, -1) : path;
  const [isOpen, setOpen] = useState(false);
  return (
    <>
      <button type="button" onClick={() => setOpen(true)}>
        <MenuIcon />
      </button>

      <Teleport to="body">
        {isOpen && (
          // <SideMenu close={() => setOpen(false)}>
          <ul className="flex  gap-5  flex-col  flex-wrap px-4">
            {NavItems.map((el: NavLink, index: number) => (
              <li
                className={`cursor-pointer hover:text-primary  ${
                  cleanPath(activeLink) === cleanPath(el.path)
                    ? "text-primary font-bold"
                    : ``
                }`}
                key={index}
              >
                <LocalePath href={el.path}>{t(`NAV.${el.name}`)}</LocalePath>
              </li>
            ))}
          </ul>
          // </SideMenu>
        )}
      </Teleport>
    </>
  );
};

export default MobileNav;