<script lang="ts">
	import Modal from './Modal.svelte';
	import { t } from '$lib/i18n';

	let { open = false, title = '', message = '', onconfirm, oncancel } = $props<{
		open: boolean;
		title?: string;
		message?: string;
		onconfirm: () => void;
		oncancel: () => void;
	}>();
</script>

<Modal {open} title={title || t('common.confirm')} onclose={oncancel}>
	<p class="text-sm text-[var(--color-muted-foreground)] mb-4">{message}</p>
	<div class="flex gap-2 justify-end">
		<button onclick={oncancel}
			class="px-3 py-1.5 rounded-md text-sm border border-[var(--color-border)] hover:bg-[var(--color-muted)] transition-colors">
			{t('common.cancel')}
		</button>
		<button onclick={onconfirm}
			class="px-3 py-1.5 rounded-md text-sm bg-[var(--color-destructive)] text-white hover:opacity-90 transition-opacity">
			{t('common.delete')}
		</button>
	</div>
</Modal>
