import { Routes, Route } from "react-router-dom";
import Login from "./pages/authPages/Login";
import Profile from "./pages/authPages/Profile";
import EditProfile from "./pages/authPages/EditProfile";
import { useAuth } from "./context/AuthContext";
import ProtectedRoute from "./components/ProtectedRoute";
import Navbar from "./components/Navbar";
import Home from "./pages/Home";
import Notification from "./components/Notification";
import { useNotification } from "./context/NotificationContext";

function App() {
  const { loading } = useAuth();
  const { notification, clearNotification } = useNotification();

  if (loading) {
    return (
      <div className="flex justify-center items-center h-screen">
        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary-500"></div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-[#0b141a]">
      <Navbar />
      {notification && (
        <div className="fixed top-4 right-4 z-50">
          <Notification
            type={notification.type}
            message={notification.message}
            show={!!notification}
            onClose={clearNotification}
          />
        </div>
      )}
      <main className=" container mx-auto">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/login" element={<Login />} />
          <Route
            path="/profile"
            element={
              <ProtectedRoute>
                <Profile />
              </ProtectedRoute>
            }
          />
          <Route
            path="/edit-profile"
            element={
              <ProtectedRoute>
                <EditProfile />
              </ProtectedRoute>
            }
          />
        </Routes>
      </main>
    </div>
  );
}

export default App;