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

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

<Modal {open} title={title || t('common.confirm')} onclose={oncancel}>
	<div class="flex items-start gap-3 mb-5">
		<div class="flex items-center justify-center w-9 h-9 rounded-full flex-shrink-0"
			style="background: var(--color-error-bg); color: var(--color-error-fg);">
			<MdiIcon name="mdiAlertCircle" size={20} />
		</div>
		<p class="text-sm mt-1.5" style="color: var(--color-muted-foreground);">{message}</p>
	</div>
	<div class="flex gap-2 justify-end">
		<button onclick={oncancel}
			class="confirm-btn-cancel">
			{t('common.cancel')}
		</button>
		<button onclick={onconfirm}
			class="confirm-btn-delete">
			<MdiIcon name={confirmIcon} size={15} />
			{confirmLabel || t('common.delete')}
		</button>
	</div>
</Modal>

<style>
	.confirm-btn-cancel {
		padding: 0.5rem 1rem;
		border-radius: 0.5rem;
		font-size: 0.875rem;
		border: 1px solid var(--color-border);
		background: transparent;
		color: var(--color-foreground);
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.confirm-btn-cancel:hover {
		background: var(--color-muted);
	}

	.confirm-btn-delete {
		display: flex;
		align-items: center;
		gap: 0.375rem;
		padding: 0.5rem 1rem;
		border-radius: 0.5rem;
		font-size: 0.875rem;
		font-weight: 500;
		border: none;
		background: var(--color-destructive);
		color: white;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.confirm-btn-delete:hover {
		box-shadow: 0 0 16px rgba(239, 68, 68, 0.3);
		transform: translateY(-1px);
	}
</style>
