import { NavLink } from 'react-router-dom'
import { Home, Crosshair, Shield, TrendingUp, User } from 'lucide-react'

const navItems = [
  { to: '/',          icon: Home,       label: 'Accueil'   },
  { to: '/session/new', icon: Crosshair, label: 'Séance'   },
  { to: '/arsenal',   icon: Shield,     label: 'Arsenal'   },
  { to: '/progress',  icon: TrendingUp, label: 'Progression'},
  { to: '/profile',   icon: User,       label: 'Profil'    },
]

export default function BottomNav() {
  return (
    <nav className="lg:hidden fixed bottom-0 left-0 right-0 bg-surface border-t border-border safe-bottom z-50">
      <div className="flex items-stretch h-16">
        {navItems.map(({ to, icon: Icon, label }) => (
          <NavLink
            key={to}
            to={to}
            end={to === '/'}
            className={({ isActive }) =>
              `flex-1 flex flex-col items-center justify-center gap-0.5 text-[10px] font-medium transition-colors
               ${isActive ? 'text-accent' : 'text-muted hover:text-text-muted'}`
            }
          >
            {({ isActive }) => (
              <>
                <Icon size={20} className={isActive ? 'text-accent' : ''} />
                <span>{label}</span>
              </>
            )}
          </NavLink>
        ))}
      </div>
    </nav>
  )
}