import {type FunctionComponent, Suspense} from 'react'
import {Route, Routes} from 'react-router'
import CollectionPage from '@/pages/collection/collectionPage.tsx'
import ArtifactPage from '@/pages/artifact/artifactPage.tsx'
import Loading from '@/components/loading.tsx'

const Routing: FunctionComponent = () => {
  return (
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route element={<CollectionPage />} path="/collection" />
        <Route element={<ArtifactPage />} path="/artifact/:id" />
        <Route element={<CollectionPage />} path="*" />
      </Routes>
    </Suspense>
  )
}

export default Routing
