import { __ } from '@wordpress/i18n';

const ModalHeader = ({
	icon,
	title,
	onClickDone,
	onClickClose,
}) => {
	return (
		<div className='edbi-modal-header'>
			<div className='edbi-modal-header__texts'>
				{
					icon && (
						<div className='edbi-modal-header__icon'>
							<i className={icon}></i>
						</div>
					)
				}
				<h3 className='edbi-modal-header__title'>
					{title}
				</h3>
			</div>

			<div
				className='edbi-modal-header__btns'
			>
				<button
					className='edbi-modal-header__btn edbi-btn edbi-btn--danger'
					onClick={onClickClose}
				>
					<span className="dashicons dashicons-no-alt"></span>
					{__( 'Cancel', 'easy-dropbox-integration' )}
				</button>
				<button
					className='edbi-modal-header__btn edbi-btn'
					onClick={onClickDone}
				>
					<span className="dashicons dashicons-yes"></span>
					{__( 'Done', 'easy-dropbox-integration' )}
				</button>
			</div>
		</div>
	)
}

export default ModalHeader