import React from 'react';
import PropTypes from 'prop-types';
import './styles/PreviewModal.scss';

import { createNamespace } from '../../../tools/namingTools';

const n = createNamespace('selectionPreview');

const PreviewModal = ({ children, title, show, onClose }) => {
    if (!show) { return null; }

    return (
        <div {...n('modal').withTestId().props}>
            <div {...n('modal-content').withTestId().props}>
                <div {...n('modal-header').withTestId().props}>
                    <span {...n('modal-header-title').withTestId().props}><h4>{title}</h4></span>
                    <span {...n('modal-close').props} onClick={e => onClose(e)} onKeyDown={e => onClose(e)}>&times;</span>
                </div>

                <div {...n('modal-body').withTestId().props}>{children}</div>
            </div>
        </div>
    );
};

PreviewModal.propTypes = {
    title: PropTypes.string,
    show: PropTypes.bool,
    onClose: PropTypes.func
};

PreviewModal.defaultProps = {
    title: '',
    show: false,
    onClose: null
};

export default PreviewModal;
