frontend/src/components/shared/Navigation.tsx

// src/components/shared/Navigation.tsx
import React from 'react';
import { Home, BookOpen, Code, MessageCircle, User, LogOut } from 'lucide-react';
import { useUser } from '../../contexts/UserContext';

const NavLink = ({ href, icon, children }) => (
  <a
    href={href}
    className="inline-flex items-center gap-2 px-1 pt-1 text-gray-600 hover:text-gray-900
              border-b-2 border-transparent hover:border-blue-500"
  >
    {icon}
    <span>{children}</span>
  </a>
);

const Navigation = () => {
  const { user, logout } = useUser();

  return (
    <nav className="bg-white shadow-sm">
      <div className="max-w-7xl mx-auto px-4">
        <div className="flex justify-between h-16">
          {/* Logo and main nav */}
          <div className="flex">
            <div className="flex-shrink-0 flex items-center">
              <span className="text-2xl font-bold text-blue-600">EduAI</span>
            </div>
            
            <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
              <NavLink icon={<Home size={20} />} href="/">Home</NavLink>
              <NavLink icon={<BookOpen size={20} />} href="/paths">Learning Paths</NavLink>
              <NavLink icon={<MessageCircle size={20} />} href="/tutor">AI Tutor</NavLink>
              <NavLink icon={<Code size={20} />} href="/playground">Code Playground</NavLink>
            </div>
          </div>

          {/* User menu */}
          <div className="flex items-center">
            {user.isAuthenticated ? (
              <div className="flex items-center gap-4">
                <span className="text-gray-700">{user.username}</span>
                <button
                  onClick={logout}
                  className="flex items-center gap-2 text-gray-600 hover:text-gray-900"
                >
                  <LogOut size={20} />
                  <span className="hidden sm:inline">Sign out</span>
                </button>
              </div>
            ) : (
              <button className="flex items-center gap-2 text-blue-600 hover:text-blue-800">
                <User size={20} />
                <span>Sign in</span>
              </button>
            )}
          </div>
        </div>
      </div>
    </nav>
  );
};

export default Navigation;