import { Link } from "react-router-dom"
import { useNavigation } from "@/contexts/navigation-context"
import { cn } from "@/lib/utils"

export function MobileNav() {
  const { navItems } = useNavigation()

  return (
    <nav className="fixed bottom-4 left-4 right-4 z-50 rounded-2xl border border-border/40 bg-background/60 backdrop-blur-xl supports-backdrop-filter:bg-background/60 md:hidden shadow-lg shadow-black/5">
      <div className="flex h-16 items-center justify-around px-2">
        {navItems.map((item) => (
          <Link
            key={item.title}
            to={item.url}
            className={cn(
              "flex flex-col items-center justify-center gap-1 rounded-xl px-4 py-2 text-xs font-medium transition-all duration-200",
              "min-w-[48px] min-h-[48px]",
              item.isActive
                ? "text-primary bg-primary/10 shadow-[inset_0_2px_4px_rgba(0,0,0,0.05)]"
                : "text-muted-foreground/80 hover:text-foreground hover:bg-white/5"
            )}
          >
            <item.icon className={cn(
              "size-5 transition-transform duration-200",
              item.isActive && "scale-110 fill-primary/20"
            )} />
            <span className={cn(
              "truncate max-w-[60px] text-[10px]",
              item.isActive && "font-bold"
            )}>
              {item.title}
            </span>
            {item.isActive && (
              <span className="absolute bottom-1 h-0.5 w-4 rounded-full bg-primary/50 blur-[1px]" />
            )}
          </Link>
        ))}
      </div>
    </nav>
  )
}