import React from 'react';
import { Modal, Props as ModalProps } from './Modal';
import { ModalClose } from './ModalClose';

import './BackdropModal.scss';

export interface Props extends ModalProps {
  backdropColor?: string;
}

export const DEFAULT_POSITIONS = {
  top: '1em',
  right: '1em',
  bottom: '1em',
  left: '1em',
};

export const BackdropModal: React.FC<Props> = ({
  children,
  onClose,
  position = DEFAULT_POSITIONS,
  backdropColor = 'rgba(0, 0, 0, 0.5)',
  ...rest
}) => {
  return (
    <div className="BackdropModal">
      <div
        className="BackdropModal__backdrop"
        style={{ backgroundColor: backdropColor }}
        onClick={onClose}
      />

      <Modal onClose={onClose} position={position} {...rest}>
        <ModalClose onClose={onClose} />

        {children}
      </Modal>
    </div>
  );
};