'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { useAuth } from '../contexts/AuthContext'

export default function Navigation() {
  const { isAuthenticated, logout } = useAuth()
  const pathname = usePathname()

  if (pathname === '/login' || pathname === '/dashboard') {
    return null
  }

  return (
    <nav className="bg-white shadow-sm dark:bg-black">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          <div className="flex items-center">
            <Link href="/" className="text-xl font-bold text-black dark:text-zinc-50">
              Agent Manager
            </Link>
          </div>
          
          <div className="flex items-center space-x-4">
            {isAuthenticated ? (
              <div className="flex items-center space-x-4">
                <Link
                  href="/dashboard"
                  className="rounded-md bg-blue-500 px-4 py-2 text-white transition-colors hover:bg-blue-600"
                >
                  Dashboard
                </Link>
                <button
                  onClick={logout}
                  className="rounded-md bg-red-500 px-4 py-2 text-white transition-colors hover:bg-red-600"
                >
                  Logout
                </button>
              </div>
            ) : (
              <Link
                href="/login"
                className="rounded-md bg-green-500 px-4 py-2 text-white transition-colors hover:bg-green-600"
              >
                Login
              </Link>
            )}
          </div>
        </div>
      </div>
    </nav>
  )
}