import { 
  TrendingUp, Calendar, ShoppingBag, 
  QrCode, Menu 
} from 'lucide-react';

interface MobileNavProps {
  activeTab: string;
  onTabChange: (tab: any) => void;
  onMenuOpen: () => void;
}

export function AdminMobileNav({ activeTab, onTabChange, onMenuOpen }: MobileNavProps) {
  const primaryTabs = [
    { id: 'dashboard', icon: TrendingUp, label: 'Dash' },
    { id: 'events', icon: Calendar, label: 'Eventos' },
    { id: 'sales', icon: ShoppingBag, label: 'Vendas' },
    { id: 'validate-ticket', icon: QrCode, label: 'Validar' },
  ];

  return (
    <div className="lg:hidden fixed bottom-0 left-0 right-0 z-50 bg-[#0A0A0A]/90 backdrop-blur-xl border-t border-white/10 px-4 py-3 flex items-center justify-between shadow-[0_-10px_40px_rgba(0,0,0,0.5)]">
      {primaryTabs.map(tab => (
        <button
          key={tab.id}
          onClick={() => onTabChange(tab.id)}
          className={`flex flex-col items-center gap-1.5 px-3 py-1 rounded-xl transition-all ${
            activeTab === tab.id ? 'text-brand-gold' : 'text-gray-500'
          }`}
        >
          <tab.icon className={`w-5 h-5 ${activeTab === tab.id ? 'scale-110' : ''}`} />
          <span className="text-[8px] font-black uppercase tracking-widest">{tab.label}</span>
        </button>
      ))}
      <button 
        onClick={onMenuOpen}
        className="flex flex-col items-center gap-1.5 px-3 py-1 rounded-xl text-gray-500"
      >
        <Menu className="w-5 h-5" />
        <span className="text-[8px] font-black uppercase tracking-widest">Menu</span>
      </button>
    </div>
  );
}
