import { NavLink } from 'react-router-dom';
import { Home, AlertTriangle, Stethoscope, Video, Pill, Wrench, Heart, Clock, Zap, BookOpen } from 'lucide-react';

interface NavItem {
  path: string;
  icon: React.ReactNode;
  label: string;
}

const navItems: NavItem[] = [
  { path: '/', icon: <Home className="w-5 h-5" />, label: 'Inicio' },
  { path: '/soporte-vital', icon: <Zap className="w-5 h-5 text-primary" />, label: 'Protocolos' },
  { path: '/herramientas', icon: <Wrench className="w-5 h-5" />, label: 'Herram.' },
  { path: '/urgencias', icon: <AlertTriangle className="w-5 h-5" />, label: 'Emergencia' },
  { path: '/manual', icon: <BookOpen className="w-5 h-5" />, label: 'Manual' },
];

const BottomNav = () => {
  return (
    <nav className="bottom-nav">
      <div className="flex items-stretch justify-around max-w-lg mx-auto">
        {navItems.map((item) => (
          <NavLink
            key={item.path}
            to={item.path}
            className={({ isActive }) =>
              `bottom-nav-item flex-1 ${isActive ? 'active' : ''}`
            }
          >
            {item.icon}
            <span className="text-xs mt-1 font-medium">{item.label}</span>
          </NavLink>
        ))}
      </div>
    </nav>
  );
};

export default BottomNav;