import React from 'react';
import { Routes, Route } from 'react-router-dom';
import RequireAuth from './components/RequireAuth';
import Layout from './components/Layout';
import Login from './pages/Login';
import Dashboard from './pages/Dashboard';
import Attendance from './pages/Attendance';
import Leave from './pages/Leave';
import Approvals from './pages/Approvals';
import Users from './pages/Users';
import Notifications from './pages/Notifications';

export default function App() {
  return (
    <Routes>
      <Route path="/login" element={<Login />} />

      <Route
        element={
          <RequireAuth>
            <Layout />
          </RequireAuth>
        }
      >
        <Route index element={<Dashboard />} />
        <Route path="/attendance" element={<Attendance />} />
        <Route path="/leave" element={<Leave />} />
        <Route
          path="/approvals"
          element={
            <RequireAuth roles={['ADMIN', 'MANAGER']}>
              <Approvals />
            </RequireAuth>
          }
        />
        <Route
          path="/users"
          element={
            <RequireAuth roles={['ADMIN', 'MANAGER']}>
              <Users />
            </RequireAuth>
          }
        />
        <Route path="/notifications" element={<Notifications />} />
      </Route>
    </Routes>
  );
}