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

import { assertEmptyObject } from '../../../../utils/assertEmptyObject';
import { useNavigationBarContext } from '../../contexts/NavigationBarContext';

/** Props for {@link NavigationBarPortal} */
export interface NavigationPortalProps {
  children: ReactNode;
}

export function NavigationBarPortal(props: NavigationPortalProps) {
  const { children, ...restProps } = props;
  assertEmptyObject(restProps);

  const { panelNode } = useNavigationBarContext();

  if (!panelNode) {
    return null;
  }

  return createPortal(children, panelNode);
}