import LinkButton from '@/components/LinkButton'
import type { ReactNode } from 'react'
import { createPortal } from 'react-dom'
import { useLocation } from 'react-router-dom'
import type { BackLoc } from '../InstructorView/useLeftNavbar'

const usePrependNavbar = (element: ReactNode) => {
  const portalNavbar = document.getElementById('portalNavbar')
  const loc = useLocation()
  const backLoc = (loc.state as BackLoc)?.backloc

  return (
    portalNavbar &&
    createPortal(
      <>
        {backLoc && <LinkButton {...backLoc} />}
        {element}
      </>,
      portalNavbar
    )
  )
}

export default usePrependNavbar
