ranger-app/src/components/Navigation.tsx

// src/components/Navigation.tsx
'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { useSession } from 'next-auth/react'
import AuthButton from './AuthButton'
import WalletButton from './wallet/WalletButton'

const Navigation = () => {
  const pathname = usePathname()
  const { data: session } = useSession()
  //const isDevelopment = process.env.NODE_ENV === 'development'
  
  // Base navigation links
  const baseLinks = [
    { href: '/', label: 'Home' },
    { href: '/sightings', label: 'Sightings' },
    { href: '/about', label: 'About' },
  ]
  
  // Conditionally add Points link if authenticated
  const authLinks = session 
    ? [{ href: '/points', label: 'My Points' }] 
    : []
  
  // Conditionally add Debug link in development mode
 // const devLinks = isDevelopment ? [{ href: '/debug', label: 'Debug' }] : []
  
  // Combine all links
  //const links = [...baseLinks, ...authLinks, ...devLinks]
  const links = [...baseLinks, ...authLinks]

  return (
    <div className="fixed w-[calc(100%-2rem)] left-4 right-4 top-4 md:top-6 flex justify-between items-center bg-gray-900/80 backdrop-blur-sm py-3 px-4 rounded-lg shadow-lg z-50 border border-gray-800/50">
      <nav className="overflow-x-auto scrollbar-hide">
        <ul className="flex gap-4 md:gap-6">
          {links.map(({ href, label }) => (
            <li key={href}>
              <Link
                href={href}
                className={`text-sm md:text-base whitespace-nowrap transition-colors duration-200 ${
                  pathname === href
                    ? 'text-emerald-400 font-bold'
                    : 'text-emerald-200/80 hover:text-emerald-200'
                }`}
              >
                {label}
              </Link>
            </li>
          ))}
        </ul>
      </nav>
      
      <div className="flex items-center gap-3">
        <div className="relative">
          <WalletButton />
        </div>
        <div className="border border-emerald-400/30 px-3 py-1 rounded flex-shrink-0">
          <AuthButton />
        </div>
      </div>
    </div>
  )
}

export default Navigation