import {BrowserRouter as Router, Route, Routes} from "react-router-dom"
import RecipeDetailPage from "./components/recipes/RecipeDetailPage"
import RecipeEditPage from "./components/recipes/RecipeEditPage"
import RecipeListPage from "./components/recipes/RecipeListPage"
import {
    getLoginUrlDefinition,
    getRecipeAddUrlDefinition,
    getRecipeDetailsUrlDefinition,
    getRecipeEditUrlDefinition,
    getRecipeListUrlDefinition,
    getUserUrlDefinition
} from "./routes"

import "./App.css"
import LoginPage from "./components/LoginPage"
import UserManagementPage from "./components/users/UserManagementPage.tsx";

/**
 * Main application component.
 * Defines routes for the recipe list, detail view, and edit form.
 */
function App() {
    return (
        <Router>
            <Routes>
                {/* Login page */}
                <Route path={getLoginUrlDefinition()} element={<LoginPage/>}/>

                {/* Home page: list of recipes */}
                <Route path={getRecipeListUrlDefinition()} element={<RecipeListPage/>}/>

                {/* Detail page: shows one recipe */}
                <Route path={getRecipeDetailsUrlDefinition()} element={<RecipeDetailPage/>}/>

                {/* Edit page: form to edit a recipe */}
                <Route path={getRecipeEditUrlDefinition()} element={<RecipeEditPage/>}/>

                {/* Add page: form to add a recipe */}
                <Route path={getRecipeAddUrlDefinition()} element={<RecipeEditPage/>}/>
                {/*User management */}
                <Route path={getUserUrlDefinition()} element={<UserManagementPage/>}/>
            </Routes>
        </Router>
    )
}

export default App