"use client";

import Link from "next/link";
import { useTranslations } from "next-intl";
import { LayoutGrid } from "lucide-react";

import {
  IMAGE_MAKER_NAV,
  LEARN_NAV_ITEMS,
  VIDEO_MAKER_NAV,
} from "@/lib/navbar-menu-data";

interface NavbarMobileMenuProps {
  onNavigate: () => void;
}

const linkClass =
  "flex min-h-11 items-center rounded-lg px-3 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900";

export function NavbarMobileMenu({ onNavigate }: NavbarMobileMenuProps) {
  const t = useTranslations("auto.componentsLayoutNavbarMobileMenu");

  return (
    <div className="flex flex-1 flex-col gap-6 overflow-y-auto">
      <section>
        <p className="px-3 text-xs font-semibold uppercase tracking-wide text-gray-400">
          {t("videoMaker")}
        </p>
        <Link
          href={VIDEO_MAKER_NAV.browseHref}
          onClick={onNavigate}
          className="mt-1 flex min-h-11 items-center gap-2 rounded-lg px-3 text-sm font-semibold text-blue-600 hover:bg-blue-50"
        >
          <LayoutGrid className="h-4 w-4" aria-hidden />
          {VIDEO_MAKER_NAV.browseLabel}
        </Link>
        <ul className="mt-1 space-y-0.5">
          {VIDEO_MAKER_NAV.items.map((item) => (
            <li key={item.href}>
              <Link href={item.href} onClick={onNavigate} className={linkClass}>
                {item.label}
              </Link>
            </li>
          ))}
        </ul>
      </section>

      <section>
        <p className="px-3 text-xs font-semibold uppercase tracking-wide text-gray-400">
          {t("imageMaker")}
        </p>
        <Link
          href={IMAGE_MAKER_NAV.browseHref}
          onClick={onNavigate}
          className="mt-1 flex min-h-11 items-center gap-2 rounded-lg px-3 text-sm font-semibold text-blue-600 hover:bg-blue-50"
        >
          <LayoutGrid className="h-4 w-4" aria-hidden />
          {IMAGE_MAKER_NAV.browseLabel}
        </Link>
        <ul className="mt-1 space-y-0.5">
          {IMAGE_MAKER_NAV.items.map((item) => (
            <li key={item.href}>
              <Link href={item.href} onClick={onNavigate} className={linkClass}>
                {item.label}
              </Link>
            </li>
          ))}
        </ul>
      </section>

      <section>
        <Link href="/pricing" onClick={onNavigate} className={linkClass}>
          {t("pricing")}
        </Link>
      </section>

      <section>
        <p className="px-3 text-xs font-semibold uppercase tracking-wide text-gray-400">
          {t("learn")}
        </p>
        <ul className="mt-1 space-y-0.5">
          {LEARN_NAV_ITEMS.map((item) => (
            <li key={item.href}>
              <Link href={item.href} onClick={onNavigate} className={linkClass}>
                {item.label}
              </Link>
            </li>
          ))}
        </ul>
      </section>
    </div>
  );
}