import type { JSX } from "solid-js";
import { isServer } from "solid-js/web";
import { Portal as SolidPortal } from "solid-js/web";

export interface PortalProps {
  /** Target container. Defaults to document.body. */
  target?: Element | null;
  children: JSX.Element;
}

/**
 * SSR-safe portal. During SSR, renders content inline.
 * On the client, moves content to the target container.
 */
export function Portal(props: PortalProps): JSX.Element {
  if (isServer) {
    return <>{props.children}</>;
  }

  return <SolidPortal mount={props.target ?? document.body}>{props.children}</SolidPortal>;
}
