import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import LoginPage from './pages/LoginPage';
// Correction ici : 'Dashboard' devient 'DashboardPage' pour correspondre au nom du fichier
import DashboardPage from './pages/Dashboard';
import { AuthProvider, useAuth } from './context/AuthContext'; // Importez AuthProvider et useAuth

// Composant pour protéger les routes nécessitant une authentification
const PrivateRoute = ({ children }) => {
    const { user } = useAuth(); // Récupère l'utilisateur depuis le contexte d'authentification
    // Si l'utilisateur est connecté, affiche les enfants (le composant de la route)
    // Sinon, redirige vers la page de connexion
    return user ? children : <Navigate to="/" />;
};

function App() {
    return (
        // Enveloppez toute l'application (ou au moins le Router) avec AuthProvider
        <AuthProvider>
            <Router>
                <Routes>
                    {/* Route pour la page de connexion */}
                    <Route path="/" element={<LoginPage />} />

                    {/* Route pour le tableau de bord (protégée) */}
                    {/* Le composant PrivateRoute s'assure que seul un utilisateur connecté peut y accéder */}
                    <Route
                        path="/dashboard"
                        element={
                            <PrivateRoute>
                                <DashboardPage /> {/* Utilise le nom correct du composant */}
                            </PrivateRoute>
                        }
                    />

                    {/* Vous pouvez ajouter d'autres routes publiques ou protégées ici */}
                </Routes>
            </Router>
        </AuthProvider>
    );
}

export default App;