import EditorPage from '@/editor/EditorPage'
import LearningActivitySpecification from '@/editor/LearningActivitySpecification'
import { PageNames } from '@/editor/types'
import useEditorAccessStorage from '@/editor/useEditorAccessStorage'
import { useParams } from '@/router'
import { memo } from 'react'

const ActivitySpecificationPage = () => {
  const { activityId } = useParams(
    '/editor/create/activity-specification/:activityId'
  )
  const [access] = useEditorAccessStorage()

  return (
    <EditorPage
      pageKey={PageNames.ACTIVITY_SPECIFICATION}
      prevPath='/editor/create/activity-specification'
      nextVisible={false}
      pageVisible={access?.injectsFilled}
    >
      <LearningActivitySpecification learningActivityId={Number(activityId)} />
    </EditorPage>
  )
}

export default memo(ActivitySpecificationPage)
