import { Link } from "@tanstack/react-router";
import { Home, Plus, Search, ShoppingCart, User as UserIcon } from "lucide-react";
import { useI18n } from "@/lib/i18n";
import { useCart } from "@/lib/cart";

export function BottomNav() {
  const { t } = useI18n();
  const { count } = useCart();

  return (
    <nav className="fixed inset-x-0 bottom-0 z-40 border-t-2 border-border bg-card lg:hidden">
      <div className="mx-auto flex max-w-[560px] items-center justify-between px-4 py-2">
        <Link to="/" className="flex flex-col items-center gap-0.5 text-teal">
          <Home className="size-5" />
          <span className="text-[10px] font-semibold">{t("home")}</span>
        </Link>
        <Link to="/search" className="flex flex-col items-center gap-0.5 text-muted-foreground">
          <Search className="size-5" />
          <span className="text-[10px] font-medium">{t("search")}</span>
        </Link>
        <Link
          to="/sell"
          className="-mt-6 grid size-14 place-items-center rounded-full bg-destructive text-destructive-foreground shadow-md ring-4 ring-background"
          aria-label={t("sell")}
        >
          <Plus className="size-6" />
        </Link>
        <Link to="/cart" className="relative flex flex-col items-center gap-0.5 text-muted-foreground">
          <ShoppingCart className="size-5" />
          {count > 0 ? (
            <span className="absolute -top-1 right-1 grid size-4 place-items-center rounded-full bg-gold text-[9px] font-bold text-ink">
              {count}
            </span>
          ) : null}
          <span className="text-[10px] font-medium">{t("cart")}</span>
        </Link>
        <Link to="/account" className="flex flex-col items-center gap-0.5 text-muted-foreground">
          <UserIcon className="size-5" />
          <span className="text-[10px] font-medium">{t("account")}</span>
        </Link>
      </div>
    </nav>
  );
}