// frontend/src/App.tsx
import "./App.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { useEffect } from "react";
import { AuthProvider } from "./contexts/AuthContext.tsx";
import Navigation from "./components/Navigation.tsx";
import Footer from "./components/Footer.tsx";
import AuthCallback from "./components/AuthCallback.tsx";
import Home from "./pages/Home.tsx";
import About from "./components/Skills.tsx";
import Login from "./pages/Login.tsx";
import Admin from "./pages/Admin.tsx";
import Upload from "./pages/Upload.tsx";
import Blog from "./pages/Blog.tsx";
import BlogPost from "./pages/BlogPost.tsx";

function App() {
  useEffect(() => {
    document.body.classList.add("loaded");
  }, []);

  return (
    <AuthProvider>
      <BrowserRouter>
        <div className="min-h-screen flex flex-col">
          <Navigation />
          <main className="flex-grow">
            <Routes>
              <Route
                path="/"
                element={
                  <>
                    <Home />
                    <About />
                  </>
                }
              />
              <Route path="/blog" element={<Blog />} />
              <Route path="/blog/:id" element={<BlogPost />} />{" "}
              {/* Новый роут */}
              <Route path="/login" element={<Login />} />
              <Route path="/auth/callback" element={<AuthCallback />} />
              <Route path="/admin" element={<Admin />} />
              <Route path="/admin/upload" element={<Upload />} />
            </Routes>
          </main>
          <Footer />
        </div>
      </BrowserRouter>
    </AuthProvider>
  );
}

export default App;
