import './App.css'
import { Route, Outlet, RouterProvider, createBrowserRouter, createRoutesFromElements } from 'react-router-dom'
import TopNav from './components/TopNav'
import Shop from './pages/Shop/Shop'
import Footer from './components/footer/Footer'
import { productsData } from './api/api'
import Signin from './pages/Signin/Signin'
import Register from './pages/Register/Register'
import NoPage from './pages/NoPage/NoPage'

function App() {
  const Layout = ()=>(
    <div>
      <TopNav />
        <Outlet />
      <Footer />
    </div>
)
  const router = createBrowserRouter(
    createRoutesFromElements(
      <Route  path='/' element={<Layout />}>
        <Route index element={<Shop />} loader={productsData}></Route>
        <Route path='signin' element={<Signin />}></Route>
        <Route path='register' element={<Register />}></Route>
        <Route path='*' element={<NoPage />}></Route>


      </Route>
    )
  )
  return (
    <>
    <RouterProvider router={router}></RouterProvider>  
    </>
  )
}

export default App
