"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="#">Home</a>
        <div className="submenu mega-menu">
          <div className="wrap-demo-item tf-grid-layout-lg lg-col-3">
            {homepages.map((item, index) => (
              <div
                key={index}
                className={`demo-item ${
                  isActive(item.href) ? "current-menu-item" : ""
                }`}
              >
                <Link href={item.href}>
                  <div className="demo-image">
                    <Image
                      className="lazyload"
                      data-src={item.src}
                      src={item.src}
                      alt={item.alt}
                      width={480}
                      height={228}
                    />
                  </div>
                  <h6 className="demo-name fw-4">{item.title}</h6>
                </Link>
              </div>
            ))}
            <div className="comming-soon">
              <Link href={`/coming-soon`} className="wrap">
                <h5 className="demo-name">Coming Soon</h5>
              </Link>
            </div>
          </div>
        </div>
      </li>
      <li
        className={`has-child position-relative ${
          isActiveParent(otherPages) ? "current-menu" : ""
        } `}
      >
        <a href="#">Pages</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>
    </>
  );
}