"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

const TABS = [
  { href: "/home", icon: "🏡", label: "Home" },
  { href: "/activity", icon: "📝", label: "Activity" },
  { href: "/ai", icon: "🔮", label: "Ask AI" },
  { href: "/menu", icon: "☰", label: "Menu" },
] as const;

const HIDDEN_PREFIXES = ["/login", "/onboarding", "/admin"];

export function BottomNav() {
  const pathname = usePathname();

  if (HIDDEN_PREFIXES.some(p => pathname?.startsWith(p))) return null;

  return (
    <nav className="fixed bottom-0 inset-x-0 bg-white dark:bg-gray-900 border-t border-gray-100 dark:border-gray-800 flex justify-around items-center py-2 z-40">
      {TABS.map(tab => {
        const isActive = pathname?.startsWith(tab.href);
        return (
          <Link
            key={tab.href}
            href={tab.href}
            className={`flex flex-col items-center gap-0.5 px-4 py-1 rounded-xl transition-colors ${
              isActive ? "text-rose-500" : "text-gray-400 dark:text-gray-500"
            }`}
          >
            <span className="text-xl leading-none">{tab.icon}</span>
            <span className="text-xs font-medium">{tab.label}</span>
          </Link>
        );
      })}
    </nav>
  );
}
