import { FunctionComponent } from 'react';
import Modal, { ModalProps } from './Modal';
import PopUpModal from './PopUpModal';

import ModalHeader from './ModalHeader';
import ModalBody from './ModalBody';
import ModalFooter from './ModalFooter';
import ModalCloseButton from './ModalCloseButton';

interface CompoundModalProps extends FunctionComponent<ModalProps> {
  Body: typeof ModalBody;
  CloseButton: typeof ModalCloseButton;
  Footer: typeof ModalFooter;
  Header: typeof ModalHeader;
  PopUp: typeof PopUpModal;
}

const CompoundModal = Modal as CompoundModalProps;

CompoundModal.PopUp = PopUpModal;
CompoundModal.Header = ModalHeader;
CompoundModal.Body = ModalBody;
CompoundModal.Footer = ModalFooter;
CompoundModal.CloseButton = ModalCloseButton;

export default CompoundModal;