import React from 'react';
import ReactDOM from 'react-dom';
import styled from 'styled-components';

const modalRoot = document.getElementById('modal-root')!;

interface ModalPortalProps {
  children: React.ReactNode;
}

const ModalPortal: React.FC<ModalPortalProps> = ({ children }) => {
  return ReactDOM.createPortal(
    <Container className="rpgui-content">{children}</Container>,
    modalRoot
  );
};

const Container = styled.div`
  position: static !important;
`;

export default ModalPortal;
