import {FunctionComponent, Suspense} from 'react'
import {Route, Routes} from 'react-router-dom'
import HomePage from '../pages/home/homePage.tsx'
import DetailPage from '../pages/detail/detailPage.tsx'
import LoadingPage from '../components/loadingPage.tsx'

const Router: FunctionComponent = () => {
  return (
    <Suspense fallback={<LoadingPage />}>
      <Routes>
        <Route path={'/'} element={<HomePage />} />
        <Route path={'/drinks/:id'} element={<DetailPage />} />
      </Routes>
    </Suspense>
  )
}

export default Router
