import type { LinkButtonProps } from '@/components/LinkButton'
import LinkButton from '@/components/LinkButton'
import type { ReactNode } from 'react'
import { createPortal } from 'react-dom'
import { useLocation } from 'react-router-dom'

export interface BackLoc {
  backloc?: LinkButtonProps
}

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

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

export default useLeftBar
