import { Link } from 'react-router-dom';
import { useAuth } from './AuthContext';

export default function Navigation({ onLogin }: { onLogin: () => void }) {
  const { token, logout } = useAuth();

  return (
     <nav className="bg-white shadow p-4 flex justify-between items-center">
        <div className="text-2xl font-bold text-indigo-700"><Link to="/">Studia</Link></div>
        <div className="flex items-center space-x-4">
          {token && (
            <>
              <a href="/dashboard" className="text-gray-600 hover:text-indigo-700">
                Dashboard
              </a>
              <a href="#" className="text-gray-600 hover:text-indigo-700">
                Settings
              </a>
            </>
          )}
          {token ? (
          <button
            onClick={logout}
            className="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition"
          >
            Logout
          </button>
          ) : (
            <button
              onClick={onLogin}
              className="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition"
            >
              Login
            </button>
          )}
        </div>
      </nav>
  );
}
