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

const page = css`
  display: flex;
  height: 100%;
`

const content = css`
  flex: 1;
`

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

  return (
    <div className={page}>
      <div className={content}>
        <Outlet />
      </div>

      <Toolbar teamId={teamId} exerciseId={exerciseId} />
    </div>
  )
}

export default Layout
