"use client";
import menu_data from "@/data/menu-data";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useLanguage } from "@/contexts/LanguageContext";
import { localizedPath, unlocalizedPath } from "@/lib/localized-path";

interface NavmenuProps {
  menu_style?: boolean;
}


export default function Navmenu({ menu_style = false }: NavmenuProps) {
  const { language } = useLanguage();
  const isArabic = language === "ar";
  const pathname = usePathname();
  const activePath = unlocalizedPath(pathname);

  const isActive = (path: string) => {
    if (path === "/") return activePath === "/";
    return activePath === path || activePath.startsWith(`${path}/`);
  };

  return (
    <ul>
      {menu_data.map((item, i) => (
        <li key={i} className={`${item.has_submenu ? "menu-item-has-children" : ""}`}>
          <Link
            href={localizedPath(item.path, language)}
            className={`${menu_style ? "light-color" : ""} ${isActive(item.path) ? "active-nav-link" : ""}`}
          >
            {isArabic ? item.titleAr : item.title}
          </Link>
          {item.has_submenu &&
            <ul className="sub-menu">
              {item.sub_menus?.map((sub_item, index) => (
                <li key={index} className={`${sub_item.has_inner_submenu ? "menu-item-has-children" : ""}`}>
                  <Link className="no-border" href={localizedPath(sub_item.path, language)}>
                    {isArabic ? sub_item.titleAr : sub_item.title}
                  </Link>
                  {sub_item.has_inner_submenu &&
                    <ul className="sub-menu">
                      {sub_item.sub_menus?.map((inner_item, inner_index) => (
                        <li key={inner_index}>
                          <Link href={localizedPath(inner_item.path, language)}>
                            {isArabic ? inner_item.titleAr : inner_item.title}
                          </Link>
                        </li>
                      ))}
                    </ul>
                  }
                </li>
              ))}
            </ul>
          }
        </li>
      ))}
    </ul>
  )
}