"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useCart } from "@/context/CartContext";

const tabs = [
  { href: "/", label: "Каталог", icon: "🛞" },
  { href: "/cart", label: "Корзина", icon: "🛒" },
  { href: "/orders", label: "Заказы", icon: "📦" },
];

export default function BottomNav() {
  const pathname = usePathname();
  const { totalCount } = useCart();

  return (
    <nav className="safe-bottom fixed inset-x-0 bottom-0 z-40 border-t border-white/10 bg-[var(--tg-surface)]/95 backdrop-blur">
      <div className="mx-auto flex max-w-xl items-stretch justify-around">
        {tabs.map((tab) => {
          const active = tab.href === "/" ? pathname === "/" : pathname.startsWith(tab.href);
          return (
            <Link
              key={tab.href}
              href={tab.href}
              className={`relative flex flex-1 flex-col items-center gap-0.5 py-2.5 text-xs font-medium transition-colors ${
                active ? "text-[var(--tg-accent)]" : "text-[var(--tg-hint)]"
              }`}
            >
              <span className="text-lg leading-none">{tab.icon}</span>
              <span>{tab.label}</span>
              {tab.href === "/cart" && totalCount > 0 && (
                <span className="absolute right-[28%] top-1 min-w-[16px] rounded-full bg-[var(--tg-accent-2)] px-1 text-center text-[10px] font-bold leading-4 text-white">
                  {totalCount}
                </span>
              )}
            </Link>
          );
        })}
      </div>
    </nav>
  );
}