"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { Home, Trophy, Users, Bell, User, MessageCircle } from "lucide-react"
import { cn } from "@/lib/utils"

export function BottomNav() {
  const pathname = usePathname()

  const navItems = [
    { href: "/feed", icon: Home, label: "Home" },
    { href: "/leaders", icon: Trophy, label: "Leaders" },
    { href: "/messages", icon: MessageCircle, label: "Messages" },
    { href: "/friendlies", icon: Users, label: "Friendlies" },
    { href: "/alerts", icon: Bell, label: "Alerts" },
    { href: "/profile", icon: User, label: "Profile" },
  ]

  return (
    <nav className="hidden md:flex fixed bottom-0 left-0 right-0 bg-card border-t border-border z-50">
      <div className="flex items-center justify-center h-16 md:h-20 lg:h-20 max-w-screen-xl mx-auto px-6 md:px-8 lg:px-12 w-full">
        <div className="flex items-center justify-center gap-4 md:gap-6 lg:gap-8 w-full">
          {navItems.map((item) => {
            const Icon = item.icon
            const isActive = pathname === item.href

            return (
              <Link
                key={item.href}
                href={item.href}
                className={cn(
                  "flex flex-col items-center justify-center gap-1.5 md:gap-2 px-3 md:px-4 lg:px-5 py-2 rounded-lg transition-all",
                  "hover:bg-secondary/50",
                  isActive 
                    ? "text-primary bg-primary/10" 
                    : "text-muted-foreground hover:text-foreground",
                )}
              >
                <Icon className="w-5 h-5 md:w-6 md:h-6 lg:w-6 lg:h-6" />
                <span className="text-xs md:text-sm font-medium whitespace-nowrap">{item.label}</span>
              </Link>
            )
          })}
        </div>
      </div>
    </nav>
  )
}