import Link from "next/link";
import Image from "next/image";

// Reuse the same navItems structure from Header
type SubMenuItem = { label: string; href: string };
type NavItem = { label: string; href: string; children?: SubMenuItem[] };

const navItems: NavItem[] = [
  {
    label: "Home",
    href: "/home-hr-management",
    children: [
      { label: "Home HR Management", href: "/home-hr-management" },
      { label: "Home CRM Software", href: "/home-crm-software" },
      { label: "Home Digital Startup", href: "/home-digital-startup" },
      { label: "Home Digital Agency", href: "/home-digital-agency" },
      { label: "Home Job Portal", href: "/home-job-portal" },
      { label: "Home Sass Landing", href: "/home-sass-landing" },
      { label: "Home App Landing", href: "/home-app-landing" },
      { label: "Home SEO Agency", href: "/home-seo-agency" },
    ],
  },
  {
    label: "About Us",
    href: "#",
    children: [
      { label: "About Us Style 1", href: "/about" },
      { label: "About Us Style 2", href: "/about-2" },
    ],
  },
  {
    label: "Pages",
    href: "#",
    children: [
      { label: "Job Page", href: "/job" },
      { label: "Job Details", href: "/job-details" },
      { label: "Team Style 1", href: "/team" },
      { label: "Team Style 2", href: "/team-2" },
      { label: "Team Details", href: "/team-details" },
      { label: "Portfolio Style 1", href: "/portfolio" },
      { label: "Portfolio Style 2", href: "/portfolio-2" },
      { label: "Portfolio Details", href: "/portfolio-details" },
      { label: "Price Table Style 1", href: "/pricing" },
      { label: "Price Table Style 2", href: "/pricing-2" },
      { label: "FAQ Style 1", href: "/faq" },
      { label: "FAQ Style 2", href: "/faq-2" },
      { label: "Error Page", href: "/error" },
    ],
  },
  {
    label: "Services",
    href: "#",
    children: [
      { label: "Services style 1", href: "/service" },
      { label: "Services style 2", href: "/service-2" },
      { label: "Services Details", href: "/service-details" },
    ],
  },
  {
    label: "Blog",
    href: "#",
    children: [
      { label: "Blog", href: "/blog" },
      { label: "Blog Details", href: "/blog-details" },
    ],
  },
  {
    label: "Contact",
    href: "#",
    children: [
      { label: "Contact Us Style 1", href: "/contact" },
      { label: "Contact Us Style 2", href: "/contact-2" },
    ],
  },
];

export default function MobileMenu() {
  return (
    <div className="th-menu-wrapper">
      <div className="th-menu-area text-center">
        <button className="th-menu-toggle">
          <i className="fal fa-times" />
        </button>
        <div className="mobile-logo">
          <Link href="/">
            <Image
              src="/assets/img/logo-white.png"
              alt="12 Apostles Cathedral"
              width={160}
              height={48}
            />
          </Link>
        </div>
        <div className="th-mobile-menu">
          <ul>
            {navItems.map((item) => (
              <li
                key={item.label}
                className={item.children ? "menu-item-has-children" : undefined}
              >
                <Link href={item.href}>{item.label}</Link>
                {item.children && (
                  <ul className="sub-menu">
                    {item.children.map((child) => (
                      <li key={child.href}>
                        <Link href={child.href}>{child.label}</Link>
                      </li>
                    ))}
                  </ul>
                )}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
}