<script lang="ts">
	let {
		title,
		message,
		confirmLabel = 'Confirm',
		cancelLabel = 'Cancel',
		danger = false,
		onConfirm,
		onCancel
	}: {
		title: string;
		message: string;
		confirmLabel?: string;
		cancelLabel?: string;
		danger?: boolean;
		onConfirm: () => void;
		onCancel: () => void;
	} = $props();

	function handleKeydown(e: KeyboardEvent) {
		if (e.key === 'Escape') {
			onCancel();
		}
	}

	function handleBackdropClick(e: MouseEvent) {
		if (e.target === e.currentTarget) {
			onCancel();
		}
	}
</script>

<svelte:window onkeydown={handleKeydown} />

<div
	role="presentation"
	class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
	onclick={handleBackdropClick}
>
	<div class="w-full max-w-sm rounded-xl bg-white p-6 shadow-xl">
		<h2 class="text-base font-semibold text-gray-900">{title}</h2>
		<p class="mt-2 text-sm text-gray-600">{message}</p>

		<div class="mt-5 flex justify-end gap-3">
			<button
				onclick={onCancel}
				class="rounded-lg border border-gray-200 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
			>
				{cancelLabel}
			</button>
			<button
				onclick={onConfirm}
				class="rounded-lg px-4 py-2 text-sm text-white {danger
					? 'bg-red-600 hover:bg-red-700'
					: 'bg-blue-600 hover:bg-blue-700'}"
			>
				{confirmLabel}
			</button>
		</div>
	</div>
</div>
