"use client";
import {
  blogPages,
  homepages,
  otherPages,
  servicePages,
  shopPages,
} from "@/data/menu";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import React from "react";

export default function Nav() {
  const pathname = usePathname();
  const isActive = (link) => link.split("/")[1] == pathname.split("/")[1];
  const isActiveParent = (links) => links.some((link) => isActive(link.href));
  return (
    <>
      {" "}
      <li
        className={`has-child ${
          isActiveParent(homepages) ? "current-menu" : ""
        } `}
      >
        <a href="#">Services</a>
        <ul className="submenu">
          {otherPages.map((item) => (
            <li
              key={item.href}
              className={`menu-item  ${
                isActive(item.href) ? "current-menu-item" : ""
              }`}
            >
              <Link href={item.href}>{item.label}</Link>
            </li>
          ))}
        </ul>
      </li>
      <li
        className={`has-child position-relative ${
          isActiveParent(servicePages) ? "current-menu" : ""
        } `}
      >
        <a href="#">Serivce</a>
        {/* <ul className="submenu">
          {servicePages.map((item) => (
            <li
              key={item.href}
              className={`menu-item  ${
                isActive(item.href) ? "current-menu-item" : ""
              }`}
            >
              <Link href={item.href}>{item.label}</Link>
            </li>
          ))}
        </ul> */}
      </li>
      <li
        className={`has-child position-relative ${
          isActiveParent(blogPages) ? "current-menu" : ""
        } `}
      >
        <a href="#">Blog</a>
        {/* <ul className="submenu">
          {blogPages.map((item) => (
            <li
              key={item.href}
              className={`menu-item  ${
                isActive(item.href) ? "current-menu-item" : ""
              }`}
            >
              <Link href={item.href}>{item.label}</Link>
            </li>
          ))}
        </ul> */}
      </li>
      <li className={` ${isActive("/contact-us") ? "current-menu" : ""} `}>
        <Link href={`/contact-us`}>Contact</Link>
      </li>
      <li
        className={`has-child position-relative ${
          isActiveParent(shopPages) ? "current-menu" : ""
        } `}
      >
        <a href="#">Shop</a>
        {/* <ul className="submenu">
          {shopPages.map((item) => (
            <li
              key={item.href}
              className={`menu-item  ${
                isActive(item.href) ? "current-menu-item" : ""
              }`}
            >
              <Link href={item.href}>{item.label}</Link>
            </li>
          ))}
        </ul> */}
      </li>
    </>
  );
}
