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,
}: Props) => (
  <Portal>
    <Container>
      {hideBackdrop ? null : <Blanket />}
      <Content>
        {children}
      </Content>
    </Container>
  </Portal>
);

export default Modal;