1<script lang="ts">
 2	import * as AlertDialog from '$lib/components/ui/alert-dialog';
 3	import type { Component } from 'svelte';
 4
 5	interface Props {
 6		open: boolean;
 7		title: string;
 8		description: string;
 9		confirmText?: string;
10		cancelText?: string;
11		variant?: 'default' | 'destructive';
12		icon?: Component;
13		onConfirm: () => void;
14		onCancel: () => void;
15		onKeydown?: (event: KeyboardEvent) => void;
16	}
17
18	let {
19		open = $bindable(),
20		title,
21		description,
22		confirmText = 'Confirm',
23		cancelText = 'Cancel',
24		variant = 'default',
25		icon,
26		onConfirm,
27		onCancel,
28		onKeydown
29	}: Props = $props();
30
31	function handleKeydown(event: KeyboardEvent) {
32		if (event.key === 'Enter') {
33			event.preventDefault();
34			onConfirm();
35		}
36		onKeydown?.(event);
37	}
38
39	function handleOpenChange(newOpen: boolean) {
40		if (!newOpen) {
41			onCancel();
42		}
43	}
44</script>
45
46<AlertDialog.Root {open} onOpenChange={handleOpenChange}>
47	<AlertDialog.Content onkeydown={handleKeydown}>
48		<AlertDialog.Header>
49			<AlertDialog.Title class="flex items-center gap-2">
50				{#if icon}
51					{@const IconComponent = icon}
52					<IconComponent class="h-5 w-5 {variant === 'destructive' ? 'text-destructive' : ''}" />
53				{/if}
54				{title}
55			</AlertDialog.Title>
56
57			<AlertDialog.Description>
58				{description}
59			</AlertDialog.Description>
60		</AlertDialog.Header>
61
62		<AlertDialog.Footer>
63			<AlertDialog.Cancel onclick={onCancel}>{cancelText}</AlertDialog.Cancel>
64			<AlertDialog.Action
65				onclick={onConfirm}
66				class={variant === 'destructive' ? 'bg-destructive text-white hover:bg-destructive/80' : ''}
67			>
68				{confirmText}
69			</AlertDialog.Action>
70		</AlertDialog.Footer>
71	</AlertDialog.Content>
72</AlertDialog.Root>