"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { IconHeart, IconMap, IconSearch, IconSpark, IconUser } from "./icons";

const TABS = [
  { href: "/recherche", label: "Explorer", Icon: IconSearch, match: /^\/(recherche|propriete|annonce)/ },
  { href: "/carte", label: "Carte", Icon: IconMap, match: /^\/carte/ },
  { href: "/membre/annonces/nouvelle", label: "Publier", Icon: IconSpark, match: /^\/membre\/annonces/ },
  { href: "/favoris", label: "Favoris", Icon: IconHeart, match: /^\/favoris/ },
  { href: "/membre", label: "Compte", Icon: IconUser, match: /^\/(membre|compte|connexion)/ },
];
export function MobileNav() {
  const path = usePathname() ?? "/";
  return (
    <nav className="md:hidden fixed bottom-0 inset-x-0 z-40 bg-white border-t border-line pb-[env(safe-area-inset-bottom)]" aria-label="Navigation mobile">
      <ul className="grid grid-cols-5">
        {TABS.map(({ href, label, Icon, match }) => {
          const active = match.test(path);
          return (
            <li key={href}>
              <Link href={href} className={`flex flex-col items-center gap-0.5 py-2 text-[11px] font-medium ${active ? "text-brand-dark" : "text-ink-3"}`} aria-current={active ? "page" : undefined}>
                <Icon width={22} height={22} />{label}
              </Link>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}