import * as React from 'react';
import { Sizes } from '../../styles';
import { StyledModal, StyledModalBackground } from './styled-modal';

interface Props {
    children: React.ReactNode;
    open: boolean;
    size: Sizes;
    onClose?: () => void;
    alignCenter?: boolean;
    showBorder?: boolean;
}

const Modal = (props: Props) => (
    <StyledModalBackground
        open={props.open}
        size={props.size}
        onClick={props.onClose}
        showBorder={props.showBorder}
    >
        <StyledModal
            alignCenter={props.alignCenter}
            open={props.open}
            size={props.size}
        >
            {props.children}
        </StyledModal>
    </StyledModalBackground>
);

Modal.defaultProps = {
    size: 'md',
}

export default Modal;