/**
 * External Dependencies
 */
import { __ } from '@wordpress/i18n';
import { Modal } from '@wordpress/components';

export function ExitDialog( { onCancel, onConfirm } ) {
	return (
		<Modal
			title={ __( 'Leave setup?', 'advanced-ads' ) }
			size="small"
			onRequestClose={ onCancel }
			shouldCloseOnEscape={ true }
			shouldCloseOnClickOutside={ true }
			className="advads-modal max-w-md"
			overlayClassName="bg-black/50 backdrop-blur-[1px]"
		>
			<p className="mt-0 text-[13.5px] leading-relaxed text-gray-600">
				{ __(
					"Your setup won't be complete yet.",
					'advanced-ads'
				) }
			</p>
			<div className="flex justify-end gap-2.5">
				<button
					type="button"
					onClick={ onCancel }
					className="cursor-pointer rounded-md border border-border bg-white px-4 py-2 text-[13.5px]"
				>
					{ __( 'Continue setup', 'advanced-ads' ) }
				</button>
				<button
					type="button"
					onClick={ onConfirm }
					className="cursor-pointer rounded-md border border-secondary-black bg-secondary-black px-4 py-2 text-[13.5px] text-white"
				>
					{ __( 'Leave setup', 'advanced-ads' ) }
				</button>
			</div>
		</Modal>
	);
}