import { useState, useEffect } from 'react';
import { createPortal } from 'react-dom';

export default function withNextPortalWrapper<T extends Record<string, any>>(
  Component: React.ComponentType<T>,
) {
  return function (props: T) {
    const [mounted, setMounted] = useState(false);

    useEffect(() => {
      setMounted(true);
    }, [setMounted]);
    return mounted ? createPortal(<Component {...props} />, document.body) : null;
  };
}