'use client';

import { useAuth } from '@/lib/auth-context';

export function Navigation() {
  const { user, logout, isAuthenticated } = useAuth();

  return (
    <nav className="bg-white shadow-sm border-b">
      <div className="max-w-7xl mx-auto px-4">
        <div className="flex justify-between items-center h-16">
          <div className="flex items-center gap-8">
            <a href="/" className="text-xl font-bold text-blue-600">
              RacePlanner
            </a>
            <a href="/events" className="text-gray-700 hover:text-blue-600">
              Events
            </a>
          </div>

          <div className="flex items-center gap-4">
            {isAuthenticated ? (
              <>
                <a href="/dashboard" className="text-gray-700 hover:text-blue-600">
                  Dashboard
                </a>
                <a href="/registrations" className="text-gray-700 hover:text-blue-600">
                  My Registrations
                </a>
                <span className="text-sm text-gray-500">{user?.name}</span>
                <button
                  onClick={logout}
                  className="px-4 py-2 text-sm text-red-600 hover:text-red-700"
                >
                  Logout
                </button>
              </>
            ) : (
              <>
                <a href="/login" className="text-gray-700 hover:text-blue-600">
                  Login
                </a>
                <a
                  href="/register"
                  className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm"
                >
                  Register
                </a>
              </>
            )}
          </div>
        </div>
      </div>
    </nav>
  );
}