import React from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import Login from './pages/Login';
import Register from './pages/Register';
import Dashboard from './pages/Dashboard';
import Departments from './pages/Departments'; // Import
import Employees from './pages/Employees';     // Import
import Payroll from './pages/Payroll';
import Reports from './pages/Reports';         // Import
import Protected from './components/Protected';
import Salary from './pages/Salary';

function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/login" element={<Login />} />
                <Route path="/register" element={<Register />} />
                
                {/* Protected Routes */}
                <Route path="/dashboard" element={<Protected><Dashboard /></Protected>} />
                <Route path="/departments" element={<Protected><Departments /></Protected>} />
                <Route path="/employees" element={<Protected><Employees /></Protected>} />
                <Route path="/payroll" element={<Protected><Payroll /></Protected>} />
                <Route path="/salary" element={<Salary />} />
                <Route path="/reports" element={<Protected><Reports /></Protected>} />

                <Route path="*" element={<Navigate to="/login" replace />} />
            </Routes>
        </BrowserRouter>
    );
}

export default App;