import React from 'react';

import Portal from '../Portal';

import { Container, Blanket, Content } from './styled';

type Props = {
  children: React.ReactNode;
  hideBackdrop?: boolean;
};

const Modal: React.FunctionComponent<Props> = ({
  children,
  hideBackdrop = false,
}) => {
  return (
    <Portal>
      <Container>
        {hideBackdrop ? null : <Blanket />}
        <Content>
          {children}
        </Content>
      </Container>
    </Portal>
  );
};

export default Modal;
