import { cn } from '@/lib/utils'
import { Home, Package, Store, BarChart3, User, Menu } from 'lucide-react'

interface NavItem {
  label: string
  icon: React.ReactNode
  href: string
  active?: boolean
}

export function MobileBottomNav({ items }: { items: NavItem[] }) {
  return (
    <nav className="lg:hidden fixed bottom-0 left-0 right-0 z-50 glass border-t border-white/10 px-2 py-2 safe-area-bottom">
      <div className="flex items-center justify-around max-w-lg mx-auto">
        {items.map((item, i) => (
          <a
            key={i}
            href={item.href}
            className={cn(
              'flex flex-col items-center gap-0.5 px-3 py-1.5 rounded-xl text-[10px] font-medium transition-all',
              item.active ? 'text-cyan-400 bg-cyan-500/10' : 'text-slate-500 hover:text-slate-300'
            )}
          >
            <span className="w-5 h-5">{item.icon}</span>
            {item.label}
          </a>
        ))}
      </div>
    </nav>
  )
}

export const sellerNavItems: NavItem[] = [
  { label: 'Home', icon: <Home className="w-5 h-5" />, href: '/dashboard' },
  { label: 'Products', icon: <Package className="w-5 h-5" />, href: '/dashboard#products' },
  { label: 'Shops', icon: <Store className="w-5 h-5" />, href: '/dashboard/shops' },
  { label: 'Analytics', icon: <BarChart3 className="w-5 h-5" />, href: '/dashboard/analytics' },
  { label: 'Profile', icon: <User className="w-5 h-5" />, href: '/dashboard/profile' },
]