<script lang="ts">
	interface Props {
		open: boolean;
		title: string;
		message: string;
		confirmLabel?: string;
		confirmVariant?: 'danger' | 'primary';
		onconfirm: () => void;
		oncancel: () => void;
	}

	const {
		open,
		title,
		message,
		confirmLabel = 'Confirm',
		confirmVariant = 'primary',
		onconfirm,
		oncancel
	}: Props = $props();

	const confirmClass = $derived(
		confirmVariant === 'danger'
			? 'bg-red-600 hover:bg-red-700 focus-visible:outline-red-600'
			: 'bg-indigo-600 hover:bg-indigo-700 focus-visible:outline-indigo-600'
	);
</script>

{#if open}
	<!-- Backdrop -->
	<div class="fixed inset-0 z-40 bg-black/30" role="presentation" onclick={oncancel}></div>

	<!-- Dialog -->
	<div class="fixed inset-0 z-50 flex items-center justify-center p-4">
		<div class="w-full max-w-md rounded-lg bg-white p-6 shadow-xl">
			<h3 class="text-lg font-semibold text-gray-900">{title}</h3>
			<p class="mt-2 text-sm text-gray-600">{message}</p>

			<div class="mt-6 flex justify-end gap-3">
				<button
					type="button"
					class="rounded-md px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100"
					onclick={oncancel}
				>
					Cancel
				</button>
				<button
					type="button"
					class="rounded-md px-3 py-2 text-sm font-medium text-white {confirmClass} focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
					onclick={onconfirm}
				>
					{confirmLabel}
				</button>
			</div>
		</div>
	</div>
{/if}
