'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { Search, Camera, FolderTree, Sparkles, Settings } from 'lucide-react'
import { cn } from '@/lib/utils'

const items = [
  { href: '/', label: 'Search', icon: Search, match: (p: string) => p === '/' || (p.startsWith('/items') && !p.startsWith('/items/new')) },
  { href: '/capture', label: 'Capture', icon: Camera, match: (p: string) => p.startsWith('/capture') || p.startsWith('/items/new') },
  { href: '/locations', label: 'Places', icon: FolderTree, match: (p: string) => p.startsWith('/locations') },
  { href: '/identify', label: 'Identify', icon: Sparkles, match: (p: string) => p.startsWith('/identify') },
  { href: '/settings', label: 'Settings', icon: Settings, match: (p: string) => p.startsWith('/settings') },
]

export function BottomNav() {
  const pathname = usePathname()
  return (
    <nav className="fixed bottom-0 inset-x-0 z-40 bg-background/95 backdrop-blur border-t safe-bottom">
      <div className="mx-auto max-w-2xl grid grid-cols-5">
        {items.map(item => {
          const Icon = item.icon
          const active = item.match(pathname)
          return (
            <Link
              key={item.href}
              href={item.href}
              className={cn(
                'flex flex-col items-center justify-center gap-1 py-3 text-xs font-medium transition-colors',
                active ? 'text-primary' : 'text-muted-foreground hover:text-foreground'
              )}
            >
              <Icon className="size-5" />
              <span>{item.label}</span>
            </Link>
          )
        })}
      </div>
    </nav>
  )
}