import React, { useState } from "react";
import { Navigate, Route, Routes } from "react-router-dom";
import DashboardPage from "./pages/DashboardPage";
import LoginPage from "./pages/LoginPage";
import RegisterPage from "./pages/RegisterPage";
import RecoverPasswordPage from "./pages/RecoverPasswordPage";
import EmployeePage from "./pages/EmployeePage";
import PayrollPage from "./pages/PayrollPage";
import ReportsPage from "./pages/ReportsPage";
import ProtectedRoute from "./components/ProtectedRoute";

const App = () => {
  const [user, setUser] = useState(null);

  return (
    <Routes>
      <Route path="/login" element={<LoginPage setUser={setUser} />} />
      <Route path="/register" element={<RegisterPage setUser={setUser} />} />
      <Route path="/recover-password" element={<RecoverPasswordPage />} />
      <Route
        path="/"
        element={
          <ProtectedRoute user={user} setUser={setUser}>
            <DashboardPage user={user} setUser={setUser} />
          </ProtectedRoute>
        }
      />
      <Route
        path="/employees"
        element={
          <ProtectedRoute user={user} setUser={setUser}>
            <EmployeePage user={user} setUser={setUser} />
          </ProtectedRoute>
        }
      />
      <Route
        path="/payrolls"
        element={
          <ProtectedRoute user={user} setUser={setUser}>
            <PayrollPage user={user} setUser={setUser} />
          </ProtectedRoute>
        }
      />
      <Route
        path="/reports"
        element={
          <ProtectedRoute user={user} setUser={setUser}>
            <ReportsPage user={user} setUser={setUser} />
          </ProtectedRoute>
        }
      />
      <Route path="*" element={<Navigate to="/" replace />} />
    </Routes>
  );
};

export default App;
