"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { motion } from "framer-motion";
import { Home, LayoutGrid, ReceiptText, User } from "lucide-react";
import { cn } from "@/lib/cn";
import { useTranslation } from "@/lib/i18n/LanguageProvider";

export function BottomNav() {
  const pathname = usePathname();
  const { t } = useTranslation();

  const TABS = [
    { href: "/home", label: t("bottomNav.home"), icon: Home },
    { href: "/packages", label: t("bottomNav.packages"), icon: LayoutGrid },
    { href: "/orders", label: t("bottomNav.orders"), icon: ReceiptText },
    { href: "/profile", label: t("bottomNav.profile"), icon: User },
  ];

  return (
    <nav className="pointer-events-none fixed inset-x-0 bottom-0 z-40 mx-auto flex max-w-md justify-center px-4 pb-safe">
      <div className="glass-strong pointer-events-auto flex w-full items-center justify-between rounded-4xl px-2 py-2">
        {TABS.map(({ href, label, icon: Icon }) => {
          const active = pathname === href || pathname.startsWith(href + "/");
          return (
            <Link
              key={href}
              href={href}
              className="relative flex flex-1 flex-col items-center gap-1 rounded-3xl px-2 py-2.5"
            >
              {active && (
                <motion.span
                  layoutId="bottom-nav-active"
                  className="absolute inset-0 rounded-3xl bg-gold/15"
                  transition={{ type: "spring", stiffness: 400, damping: 32 }}
                />
              )}
              <Icon
                size={20}
                strokeWidth={active ? 2.6 : 2}
                className={cn(
                  "relative z-10 transition-colors",
                  active
                    ? "text-gold-dim dark:text-gold-bright"
                    : "text-muted"
                )}
              />
              <span
                className={cn(
                  "relative z-10 text-[10.5px] font-medium transition-colors",
                  active
                    ? "text-gold-dim dark:text-gold-bright"
                    : "text-muted"
                )}
              >
                {label}
              </span>
            </Link>
          );
        })}
      </div>
    </nav>
  );
}