import { useParams } from '@/router'
import UserDetail from '@/users/UserDetail'
import CenteredSpinner from '@inject/shared/components/CenteredSpinner'
import Container from '@inject/shared/components/Container'
import flexedPage from '@inject/shared/css/flexedPage'
import { Suspense } from 'react'

const UserView = () => {
  const { userId } = useParams('/users/:userId')

  return (
    <Suspense fallback={<CenteredSpinner />}>
      <Container className={flexedPage}>
        <UserDetail userId={userId} />
      </Container>
    </Suspense>
  )
}

export default UserView
