import React from 'react';

import './Modal.css'
import FocusTrap from 'focus-trap-react';

export default props => {
  let modalStyles = [];
  let contentStyles = [];
  modalStyles.push('Modal');
  contentStyles.push('ModalContent');
  if (props.critical) {
    modalStyles.push('ModalCritical');
    contentStyles.push('ModalCritical');
  }

  if (props.transparent) {
    modalStyles.push('Transparent');
  }

  return (
    <FocusTrap active={!props.disableFocusTrap}>
      <div
        className={modalStyles.join(' ')}
        onClick={props.clicked}>
        <div className={contentStyles.join(' ')}>
          {props.children}
        </div>
      </div>
    </FocusTrap>
  );
};
