import { useParams } from '@/router'
import { useSetPageTitle } from '@/utils'
import TraineeView from '@/views/TraineeView'
import CenteredSpinner from '@inject/shared/components/CenteredSpinner'
import { Outlet } from 'react-router-dom'

export const Pending = () => <CenteredSpinner />

const Layout = () => {
  const { exerciseId, teamId } = useParams('/trainee/:exerciseId/:teamId')
  useSetPageTitle('Trainee')

  return (
    <TraineeView exerciseId={exerciseId} teamId={teamId}>
      <Outlet />
    </TraineeView>
  )
}

export default Layout
