import { BrowserRouter as Router, Routes, Route } from "react-router-dom"
import RecipeDetailPage from "./components/recipes/RecipeDetailPage"
import RecipeEditPage from "./components/recipes/RecipeEditPage"
import RecipeListPage from "./components/recipes/RecipeListPage"

import "./App.css"

/**
 * Main application component.
 * Defines routes for the recipe list, detail view, and edit form.
 */
function App() {
  return (
    <Router>
      <Routes>
        {/* Home page: list of recipes */}
        <Route path="/" element={<RecipeListPage />} />

        {/* Detail page: shows one recipe */}
        <Route path="/recipe/:id" element={<RecipeDetailPage />} />

        {/* Edit page: form to edit a recipe */}
        <Route path="/recipe/:id/edit" element={<RecipeEditPage />} />
      </Routes>
    </Router>
  )
}

export default App