src/App.js

import React, { useEffect } from 'react';
import { Routes, Route, useLocation } from 'react-router-dom';  // Remove BrowserRouter import
import { AuthProvider } from './hooks/useAuth';
import MainLayout from './components/Layout/MainLayout';
import Home from './pages/Home';
import Dashboard from './pages/Dashboard';
import About from './pages/About';
import Login from './components/Auth/Login';
import Logout from './components/Auth/Logout';
import TokenHandler from './components/Auth/TokenHandler';
import PrivateRoute from './components/Auth/PrivateRoute';
// import useTheme from './hooks/useTheme'; // No longer needed here if only themeLoading was used
// import LoadingSpinner from './components/UI/LoadingSpinner';
import { CssBaseline } from '@mui/material';

const ScrollToTop = () => {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth',
    });
  }, [pathname]);

  return null;
};

function App() {
  // const { themeLoading } = useTheme(); // Remove themeLoading usage
  
  // Remove the loading check
  // if (themeLoading) {
  //   return <LoadingSpinner fullScreen />;
  // }

  return (
    <>
      <CssBaseline />
      <AuthProvider>
        <ScrollToTop />
        <MainLayout>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/login" element={<Login />} />
            <Route path="/logout" element={<Logout />} />
            <Route path="/token-refresh" element={<TokenHandler />} />
            <Route path="/about" element={<About />} />
            <Route 
              path="/dashboard" 
              element={
                <PrivateRoute>
                  <Dashboard />
                </PrivateRoute>
              } 
            />
            <Route path="*" element={<Home />} />
          </Routes>
        </MainLayout>
      </AuthProvider>
    </>
  );
}

export default App;