import Link from "next/link";
import { Home, Search, ShoppingBag, User } from "lucide-react";
import { cn } from "@/lib/utils/cn";

type Tab = "profile" | "orders" | "search" | "home";

const TABS: { key: Tab; href: string; label: string; icon: typeof Home }[] = [
  { key: "profile", href: "/profile", label: "پروفایل", icon: User },
  { key: "orders", href: "/orders", label: "سفارش‌ها", icon: ShoppingBag },
  { key: "search", href: "/", label: "جستجو", icon: Search },
  { key: "home", href: "/", label: "خانه", icon: Home },
];

/** winofyfrontenddoc (1).md §3.6 — sticky bottom nav, 4 equal-width tabs. */
export function BottomNav({ active }: { active: Tab }) {
  return (
    <nav
      className="fixed inset-x-0 bottom-0 z-10 mx-auto flex w-full max-w-[390px] items-stretch border-t border-gray-300 bg-white"
      style={{ paddingBottom: "env(safe-area-inset-bottom)" }}
    >
      {TABS.map((tab) => {
        const Icon = tab.icon;
        const isActive = tab.key === active;
        return (
          <Link
            key={tab.key}
            href={tab.href}
            className={cn(
              "flex flex-1 flex-col items-center gap-1 py-3 text-label",
              isActive ? "text-primary-action" : "text-gray-500",
            )}
          >
            <Icon className="h-5 w-5" />
            <span>{tab.label}</span>
          </Link>
        );
      })}
    </nav>
  );
}