arjmand-pharmacy/components/layout/MegaMenu.tsx

"use client";

import Link from "next/link";
import { Placeholder } from "@/components/Placeholder";
import type { NavCategory } from "@/lib/categories";

export function MegaMenu({ open, categories }: { open: boolean; categories: NavCategory[] }) {
  if (!open) return null;

  const list = categories.length ? categories : [];

  return (
    <div className="absolute top-full right-0 z-50 mt-2 w-[min(920px,calc(100vw-2rem))] rounded-2xl border border-line bg-white p-5 shadow-[0_16px_40px_rgba(0,38,133,0.12)]">
      {list.length === 0 ? (
        <p className="text-[13px] text-muted">دسته‌بندی‌ها به‌زودی اضافه می‌شوند.</p>
      ) : (
        <div className="grid grid-cols-2 gap-5 md:grid-cols-3 lg:grid-cols-4">
          {list.map((category) => (
            <div key={category.id}>
              <Link
                href={category.href}
                className="mb-3 flex items-center gap-2 text-[13.5px] font-semibold text-navy"
              >
                <span className="grid size-9 place-items-center overflow-hidden rounded-xl bg-sky">
                  <Placeholder src={category.image || "/placeholders/category.svg"} className="size-full object-cover" />
                </span>
                {category.title}
              </Link>
              {category.children.length ? (
                <ul className="space-y-1.5 pr-1">
                  {category.children.map((child) => (
                    <li key={child.id}>
                      <Link
                        href={child.href}
                        className="block rounded-lg px-2 py-1 text-[12.5px] text-muted transition hover:bg-sky hover:text-primary"
                      >
                        {child.title}
                      </Link>
                    </li>
                  ))}
                </ul>
              ) : null}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}