import React from 'react';

import {FormattedMessage} from 'react-intl';

import './confirm_dialog.scss';

type Props = {
    children: React.ReactNode;
    onConfirm: () => void;
    onCancel: () => void;
}

const ConfirmDialog: React.FC<Props> = ({children, onConfirm, onCancel}) => (
    <div
        className='ConfirmDialog__overlay'
        onClick={(e) => e.stopPropagation()}
    >
        <div className='ConfirmDialog'>
            <p className='ConfirmDialog__text'>
                {children}
            </p>
            <div className='ConfirmDialog__actions'>
                <button
                    type='button'
                    className='btn btn--cancel'
                    onClick={onCancel}
                >
                    <FormattedMessage
                        id='badges.modal.btn_cancel'
                        defaultMessage='Отмена'
                    />
                </button>
                <button
                    type='button'
                    className='btn btn--danger'
                    onClick={onConfirm}
                >
                    <FormattedMessage
                        id='badges.modal.btn_confirm_delete'
                        defaultMessage='Да, удалить'
                    />
                </button>
            </div>
        </div>
    </div>
);

export default ConfirmDialog;