frontend/src/lib/components/ConfirmDialog.svelte

<script>
	let { 
		show = false, 
		title = 'Confirm', 
		message = 'Are you sure?', 
		confirmText = 'Confirm', 
		cancelText = 'Cancel',
		variant = 'danger',
		onconfirm = () => {},
		oncancel = () => {}
	} = $props();

	const variants = {
		danger: 'btn-danger',
		warning: 'btn-warning',
		success: 'btn-success',
		info: 'btn-info'
	};
</script>

{#if show}
	<div
		class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4"
		onclick={(e) => e.target === e.currentTarget && oncancel()}
		role="dialog"
		aria-modal="true"
	>
		<div class="card max-w-sm w-full p-6 animate-in">
			<h3 class="text-lg font-semibold mb-2">{title}</h3>
			<p class="text-gray-500 text-sm mb-6">{message}</p>
			<div class="flex justify-end gap-3">
				<button class="btn-ghost" onclick={oncancel}>{cancelText}</button>
				<button class={variants[variant]} onclick={onconfirm}>{confirmText}</button>
			</div>
		</div>
	</div>
{/if}

<style>
	.animate-in {
		animation: modal-in 0.2s ease-out;
	}
	@keyframes modal-in {
		from { opacity: 0; transform: scale(0.95); }
		to { opacity: 1; transform: scale(1); }
	}
</style>