// Snippet — merge this into the existing src/App.tsx.
// Do NOT overwrite the existing App.tsx; only apply the changes shown here.

import { lazy, Suspense } from 'react';
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';

// ... existing imports ...
import { AuthProvider, useAuth } from './providers/AuthContext';

const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
  const { isAuthenticated } = useAuth();
  return isAuthenticated ? <>{children}</> : <Navigate to="/login" replace />;
};

const LoginPage = lazy(() => import('./pages/Auth/Login'));
const CallbackPage = lazy(() => import('./pages/Auth/Callback'));

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <AuthProvider>
        {/* ... existing providers ... */}
        <BrowserRouter>
          <Suspense fallback={null}>
            <Routes>
              <Route
                path="/"
                element={<ProtectedRoute><HomePage /></ProtectedRoute>}
              />
              <Route path="/login" element={<LoginPage />} />
              <Route path="/callback" element={<CallbackPage />} />
            </Routes>
          </Suspense>
        </BrowserRouter>
        {/* ... */}
      </AuthProvider>
    </ThemeProvider>
  );
};
