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

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

  const portalRef = document.getElementById('toolPanel')

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

export default Layout
