import { BrowserRouter, Route, Routes } from "react-router";
import { AuthProvider } from "./context/auth-context";
import { Layout } from "./pages/layout";
import { Login } from "./pages/login";
import { Dashboard } from "./pages/dashboard";
import { CreateProjectPage } from "./pages/projects/new";
import { ProjectDetailPage } from "./pages/projects/detail";
import { CreateFunctionPage } from "./pages/projects/functions/new";
import { FunctionDetailPage } from "./pages/projects/functions/detail";

export function App() {
  return (
    <BrowserRouter>
      <AuthProvider>
        <Routes>
          <Route path="/" element={<Layout />}>
            <Route index element={<Dashboard />} />
            <Route path="projects">
              <Route path="new" element={<CreateProjectPage />} />
              <Route path=":projectId" element={<ProjectDetailPage />} />
              <Route
                path=":projectId/functions/new"
                element={<CreateFunctionPage />}
              />
              <Route
                path=":projectId/functions/:functionId"
                element={<FunctionDetailPage />}
              />
            </Route>
            <Route path="login" element={<Login />} />
          </Route>
        </Routes>
      </AuthProvider>
    </BrowserRouter>
  );
}
