import { useParams } from '@/router'
import Toolbar from '@/views/TraineeView/Toolbar'
import { createPortal } from 'react-dom'
import { Outlet } from 'react-router-dom'

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

  const portalRef = document.getElementById('toolPanel')

  return (
    <>
      <Outlet />
      {portalRef &&
        createPortal(
          <Toolbar teamId={teamId} exerciseId={exerciseId} />,
          portalRef
        )}
    </>
  )
}

export default Layout
