<script setup>
import Modal from '@/Components/Modal.vue'

const props = defineProps({
    show: {
        type: Boolean,
        default: false,
    },
    title: {
        type: String,
        default: 'Bist du sicher?',
    },
    message: {
        type: String,
        default: '',
    },
    confirmLabel: {
        type: String,
        default: 'Bestätigen',
    },
    cancelLabel: {
        type: String,
        default: 'Abbrechen',
    },
    variant: {
        type: String,
        default: 'danger',
        validator: (v) => ['danger', 'warning', 'info'].includes(v),
    },
})

const emit = defineEmits(['confirm', 'cancel'])

const variantClasses = {
    danger: 'bg-red-600 hover:bg-red-700 focus:ring-red-500',
    warning: 'bg-amber-600 hover:bg-amber-700 focus:ring-amber-500',
    info: 'bg-blue-600 hover:bg-blue-700 focus:ring-blue-500',
}

const iconColors = {
    danger: 'text-red-500',
    warning: 'text-amber-500',
    info: 'text-blue-500',
}
</script>

<template>
    <Modal :show="show" max-width="md" @close="emit('cancel')">
        <div class="p-6">
            <div class="flex items-start gap-4">
                <!-- Warn-Icon -->
                <div
                    class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gray-100"
                >
                    <svg
                        class="h-6 w-6"
                        :class="iconColors[variant]"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                        stroke-width="1.5"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
                        />
                    </svg>
                </div>

                <div class="flex-1">
                    <h3 class="text-lg font-semibold text-gray-900">
                        {{ title }}
                    </h3>
                    <p v-if="message" class="mt-1 text-sm text-gray-600">
                        {{ message }}
                    </p>
                    <slot />
                </div>
            </div>

            <div class="mt-6 flex justify-end gap-3">
                <button
                    data-testid="confirm-dialog-cancel-button"
                    type="button"
                    class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
                    @click="emit('cancel')"
                >
                    {{ cancelLabel }}
                </button>
                <button
                    data-testid="confirm-dialog-confirm-button"
                    type="button"
                    class="rounded-lg px-4 py-2 text-sm font-medium text-white shadow-sm transition focus:outline-none focus:ring-2 focus:ring-offset-2"
                    :class="variantClasses[variant]"
                    @click="emit('confirm')"
                >
                    {{ confirmLabel }}
                </button>
            </div>
        </div>
    </Modal>
</template>
