import { BrowserRouter, Routes, Route } from "react-router-dom";
import Nav from "./components/Nav";
import Footer from "./components/Footer";
import Home from "./pages/Home";
import LoginPage from "./pages/LoginPage";
import SignUpPage from "./pages/SignUpPage";
import ServicePage from "./pages/ServicePage";
import ProfilePage from "./pages/ProfilePage";
import PublishProfilePage from "./pages/PublishProfilePage";
import ProtectedRoute from "./components/ProtectedRoute";

export default function App() {
  return (
    <BrowserRouter>
      <Nav />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="login" element={<LoginPage />} />
        <Route path="signup" element={<SignUpPage />} />
        <Route path="services/:serviceId" element={<ServicePage />} />
        <Route path="profile" element={<ProfilePage />} />
        <Route
          path="publish"
          element={
            <ProtectedRoute role="pro">
              <PublishProfilePage />
            </ProtectedRoute>
          }
        />
      </Routes>
      <Footer />
    </BrowserRouter>
  );
}