"use client";

import Link from "next/link";
import { useEffect } from "react";
import { categories } from "@/lib/categories";
import { siteConfig, whatsappLink } from "@/lib/siteConfig";

export function MobileMenu({ open, onClose }: { open: boolean; onClose: () => void }) {
  useEffect(() => {
    if (!open) return;
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = "";
    };
  }, [open]);

  if (!open) return null;

  return (
    <div className="fixed inset-0 z-[60] lg:hidden" role="dialog" aria-modal="true">
      <button
        aria-label="Close menu"
        onClick={onClose}
        className="absolute inset-0 animate-fade-in bg-black/40"
      />
      <div className="absolute left-0 top-0 flex h-full w-full max-w-xs animate-slide-in-left flex-col bg-white shadow-2xl">
        <div className="flex items-center justify-between border-b border-black/[0.06] px-5 py-4">
          <span className="font-display font-semibold text-brand-ink">Menu</span>
          <button
            aria-label="Close menu"
            onClick={onClose}
            className="rounded-full p-1.5 text-black/50 hover:bg-black/5"
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
              <path strokeLinecap="round" d="M6 6l12 12M18 6L6 18" />
            </svg>
          </button>
        </div>
        <nav className="flex-1 overflow-auto px-5 py-4">
          <p className="mb-2 text-xs font-medium uppercase tracking-wide text-black/40">
            Shop by department
          </p>
          <ul className="flex flex-col">
            {categories.map((c) => (
              <li key={c.slug}>
                <Link
                  href={`/category/${c.slug}`}
                  onClick={onClose}
                  className="block border-b border-black/[0.05] py-3 text-sm font-medium text-brand-ink"
                >
                  {c.name}
                </Link>
              </li>
            ))}
          </ul>
          <ul className="mt-4 flex flex-col gap-3">
            <li>
              <Link href="/track-order" onClick={onClose} className="text-sm text-brand-ink">
                Track my order
              </Link>
            </li>
            <li>
              <Link href="/about" onClick={onClose} className="text-sm text-brand-ink">
                About &amp; delivery info
              </Link>
            </li>
            <li>
              <a
                href={whatsappLink()}
                target="_blank"
                rel="noopener noreferrer"
                className="text-sm text-brand-ink"
              >
                Chat with us on WhatsApp
              </a>
            </li>
            <li>
              <a href={`tel:${siteConfig.contactPhone}`} className="text-sm text-brand-ink">
                Call {siteConfig.contactPhoneDisplay}
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  );
}
