import LinkButton from '@/components/LinkButton'
import { useParams } from '@/router'
import InjectMessageView from '@/views/InjectMessageView'
import useAdaptiveBack from '@/views/TraineeView/useAdaptiveBack'

const Page = () => {
  const { teamId, exerciseId, channelId, actionLogId } = useParams(
    '/trainee/:exerciseId/:teamId/:channelId/form/:actionLogId'
  )
  const backNav = useAdaptiveBack(
    <LinkButton
      button={{ text: 'Back', icon: 'chevron-left', minimal: true }}
      end
      link={[
        `/trainee/:exerciseId/:teamId/:channelId/form`,
        {
          params: {
            teamId,
            exerciseId,
            channelId,
          },
        },
      ]}
    />
  )

  return (
    <>
      {backNav}
      <InjectMessageView
        teamId={teamId}
        exerciseId={exerciseId}
        actionLogId={actionLogId}
      />
    </>
  )
}

export default Page
