'use client'

import type { ReactNode } from 'react'
import { createPortal } from 'react-dom'

import { useFirstRender } from '../../hooks/index.ts'

export function Portal({ children }: { children: ReactNode }) {
  const firstRender = useFirstRender({ immediatelyRerender: true })

  // Don't render until after hydration
  if (firstRender) {
    return null
  }

  return createPortal(children, document.body)
}
