import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
import Home from './pages/Home';
import WebLayout from "./layouts/WebLayout";
import NotFound from './pages/NotFound';

import ROUTE_CONSTANTS from './types/routes';
import Create from './pages/Create';
import Favorites from './pages/Favorites';
import Profile from './pages/Profile';
import ShoppingList from './pages/ShoppingList';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Navigate to={ROUTE_CONSTANTS.Home} replace />} />
        <Route path="/v2/web" element={<WebLayout />}>
          <Route index element={<Navigate to={ROUTE_CONSTANTS.Home} replace />} />
          <Route path="home" element={<Home />} />
          <Route path="favorites" element={<Favorites />} />
          <Route path="create" element={<Create />} />
          <Route path="profile" element={<Profile />} />
          <Route path="list" element={<ShoppingList />} />

          {/* <Route path="recipe/:id" element={<Home />} /> */}

        </Route>

        {/* 404: Not Found */}
        <Route path="*" element={<WebLayout />}>
          <Route path="*" element={<NotFound />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App
