<script lang="ts">
	import Modal from "#lib/components/ui/Modal.svelte";
	import Button, { type ButtonVariants } from "#lib/components/ui/Button.svelte";

	interface Props {
		open?: boolean;
		title: string;
		description?: string;
		confirmLabel: string;
		variant?: ButtonVariants["variant"];
		cancelLabel?: string;
		loading?: boolean;
		onconfirm: () => void;
		testid?: string;
	}

	let {
		open = $bindable(false),
		title,
		description,
		confirmLabel,
		variant = "destructive",
		cancelLabel = "Cancel",
		loading = false,
		onconfirm,
		testid
	}: Props = $props();
</script>

{#snippet footer()}
	<Button class="flex-1" disabled={loading} onclick={() => (open = false)}>
		{cancelLabel}
	</Button>
	<Button {variant} class="flex-1" {loading} onclick={onconfirm}>
		{confirmLabel}
	</Button>
{/snippet}

<Modal bind:open {title} {description} {footer} {testid}></Modal>