import { BrowserRouter, Routes, Route } from 'react-router'
import { AppShell } from './components/layout/AppShell'
import { AuthProvider } from './context/AuthContext'
import { HomePage } from './pages/HomePage'
import { RecipePage } from './pages/RecipePage'
import { SearchPage } from './pages/SearchPage'
import { ProfilePage } from './pages/ProfilePage'
import { RecipeFormPage } from './pages/RecipeFormPage'
import { ShoppingPage } from './pages/ShoppingPage'
import { LoginPage } from './pages/LoginPage'
import { RegisterPage } from './pages/RegisterPage'

export default function App() {
  return (
    <AuthProvider>
      <BrowserRouter>
        <Routes>
          {/* Public Auth Routes */}
          <Route path="/login" element={<LoginPage />} />
          <Route path="/register" element={<RegisterPage />} />

          {/* Main App Routes */}
          <Route element={<AppShell />}>
            <Route index element={<HomePage />} />
            <Route path="recipe/:slug" element={<RecipePage />} />
            <Route path="search" element={<SearchPage />} />
            <Route path="new" element={<RecipeFormPage />} />
            <Route path="recipe/:slug/edit" element={<RecipeFormPage />} />
            <Route path="shopping" element={<ShoppingPage />} />
            <Route path="profile" element={<ProfilePage />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </AuthProvider>
  )
}
