import type {FunctionComponent} from 'react'
import {Suspense} from 'react'
import {Route, Routes} from 'react-router'
import Contacts from '@/pages/home/contacts.tsx'
import {ErrorBoundary} from 'react-error-boundary'
import ErrorFallback from '@/routing/errorFallback.tsx'
import Loading from '@/pages/home/loading.tsx'
import ContactDetailForm from '@/pages/home/detail/contactDetailForm.tsx'

const Routing: FunctionComponent = () => {
  return (
    <ErrorBoundary fallback={<ErrorFallback />}>
      <Suspense fallback={<Loading />}>
        <Routes>
          <Route path="/" element={<Contacts />} />
          <Route path="/:id" element={<ContactDetailForm />} />
        </Routes>
      </Suspense>
    </ErrorBoundary>
  )
}

export default Routing
