import { Modal, Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { Trash2, X } from 'lucide-react';

const ConfirmDialog = ( {
	isOpen,
	title,
	message,
	confirmLabel = __( 'Delete', 'cliq-store-locator' ),
	cancelLabel = __( 'Cancel', 'cliq-store-locator' ),
	isBusy = false,
	onConfirm,
	onCancel,
} ) => {
	if ( ! isOpen ) {
		return null;
	}

	return (
		<Modal
			className="cliqthemes-ui-confirm-dialog"
			title={ title }
			onRequestClose={ onCancel }
			shouldCloseOnClickOutside={ ! isBusy }
		>
			<p>{ message }</p>
			<div className="cliqthemes-ui-confirm-actions">
				<Button
					variant="tertiary"
					className="cliqthemes-ui-button cliqthemes-ui-button--ghost"
					onClick={ onCancel }
					disabled={ isBusy }
				>
					<X
						size={ 16 }
						strokeWidth={ 1.8 }
						className="cliqthemes-ui-button__icon"
					/>
					{ cancelLabel }
				</Button>
				<Button
					variant="primary"
					className="cliqthemes-ui-button cliqthemes-ui-button--danger"
					isDestructive
					onClick={ onConfirm }
					isBusy={ isBusy }
				>
					<Trash2
						size={ 16 }
						strokeWidth={ 1.8 }
						className="cliqthemes-ui-button__icon"
					/>
					{ confirmLabel }
				</Button>
			</div>
		</Modal>
	);
};

export default ConfirmDialog;
