'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { Home, Users, ScanLine, Calendar, Settings } from 'lucide-react'

const navItems = [
  { href: '/', label: 'Home', icon: Home },
  { href: '/{{NAV_ITEM_1_HREF}}', label: '{{NAV_ITEM_1_LABEL}}', icon: Users },
  { href: '/scanner', label: 'Scanner', icon: ScanLine },
  { href: '/{{NAV_ITEM_2_HREF}}', label: '{{NAV_ITEM_2_LABEL}}', icon: Calendar },
  { href: '/settings', label: 'Settings', icon: Settings },
]

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

  const isActive = (href: string) => {
    if (href === '/') {
      return pathname === '/'
    }
    return pathname.startsWith(href)
  }

  return (
    <nav className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-50 dark:bg-gray-950 dark:border-gray-800">
      <div className="flex justify-around items-center h-16">
        {navItems.map((item) => {
          const Icon = item.icon
          const active = isActive(item.href)

          return (
            <Link
              key={item.href}
              href={item.href}
              className={`flex flex-col items-center justify-center flex-1 h-full space-y-1 transition-colors ${
                active ? 'text-primary' : 'text-gray-600 dark:text-gray-400'
              }`}
            >
              <Icon className="w-6 h-6" />
              <span className="text-xs font-medium">{item.label}</span>
            </Link>
          )
        })}
      </div>
    </nav>
  )
}