import { Link, Route, Routes } from "react-router-dom";
import "./App.css";
import RecipeDetailPage from "./pages/RecipeDetailPage";
import RecipeFormPage from "./pages/RecipeFormPage";
import RecipeListPage from "./pages/RecipeListPage";

function App() {
  return (
    <div className="app">
      <header className="app-header">
        <Link to="/" className="brand">🍳 RecipeInator</Link>
      </header>
      <main>
        <Routes>
          <Route path="/" element={<RecipeListPage />} />
          <Route path="/recipes/new" element={<RecipeFormPage />} />
          <Route path="/recipes/:id" element={<RecipeDetailPage />} />
          <Route path="/recipes/:id/edit" element={<RecipeFormPage />} />
        </Routes>
      </main>
    </div>
  );
}

export default App;
