```vue
<script setup>
import { X, Trash2, AlertTriangle } from 'lucide-vue-next';

defineProps({
    show: {
        type: Boolean,
        default: false,
    },
    name: {
        type: String,
        default: '',
    },
});

defineEmits(['cancel', 'confirm']);
</script>

<template>
    <Teleport to="body">
        <Transition name="modal">
            <div v-if="show" class="fixed inset-0 z-50 flex items-center justify-center
                       p-4 bg-black/40 backdrop-blur-sm">
                <div class="w-full max-w-md
                           bg-white
                           rounded-3xl
                           border border-gray-100
                           shadow-2xl
                           overflow-hidden" @click.stop>

                    <!-- Header -->
                    <div class="flex items-center justify-between
                               px-6 py-5
                               border-b border-gray-100">
                        <div class="flex items-center gap-3">

                            <div class="w-10 h-10
                                       flex items-center justify-center
                                       bg-red-50
                                       text-red-600
                                       rounded-2xl">
                                <Trash2 :size="19" />
                            </div>

                            <div>
                                <h2 class="text-sm font-bold text-gray-800">
                                    Hapus Data
                                </h2>

                                <p class="text-[11px] text-gray-400 mt-0.5">
                                    Konfirmasi penghapusan data
                                </p>
                            </div>

                        </div>

                        <button type="button" @click="$emit('cancel')" class="inline-flex items-center justify-center
                                   w-9 h-9
                                   bg-gray-50 hover:bg-gray-100
                                   text-gray-500 hover:text-gray-700
                                   rounded-xl
                                   transition" title="Tutup">
                            <X :size="18" />
                        </button>

                    </div>

                    <!-- Content -->
                    <div class="px-6 py-6 space-y-5">

                        <div class="flex items-start gap-4">

                            <div class="w-10 h-10
                                       flex items-center justify-center
                                       bg-amber-50
                                       text-amber-600
                                       rounded-2xl
                                       shrink-0">
                                <AlertTriangle :size="20" />
                            </div>

                            <div class="space-y-2">

                                <p class="text-sm text-gray-600 leading-6">
                                    Yakin mau ngapus data ini?
                                </p>

                                <div class="px-4 py-3
                                           bg-gray-50
                                           border border-gray-100
                                           rounded-2xl">
                                    <span class="block text-[10px]
                                                 font-semibold
                                                 text-gray-400
                                                 uppercase
                                                 tracking-wider
                                                 mb-1">
                                        Data yang akan dihapus
                                    </span>

                                    <p class="text-sm font-bold text-gray-800 break-all">
                                        {{ name || 'Data ini' }}
                                    </p>
                                </div>

                                <p class="text-[11px] text-gray-400 leading-5">
                                    Data yang sudah dihapus tidak dapat dikembalikan.
                                </p>

                            </div>

                        </div>

                    </div>

                    <!-- Footer -->
                    <div class="px-6 py-4
                               bg-gray-50/70
                               border-t border-gray-100
                               flex items-center justify-end gap-3">

                        <button type="button" @click="$emit('cancel')" class="inline-flex items-center justify-center
                                   px-4 py-2.5
                                   bg-white
                                   hover:bg-gray-100
                                   text-gray-700
                                   text-xs font-semibold
                                   border border-gray-200
                                   rounded-2xl
                                   transition">
                            Batal
                        </button>

                        <button type="button" @click="$emit('confirm')" class="inline-flex items-center justify-center
                                   gap-2
                                   px-4 py-2.5
                                   bg-red-600
                                   hover:bg-red-700
                                   text-white
                                   text-xs font-semibold
                                   rounded-2xl
                                   transition
                                   shadow-xs">
                            <Trash2 :size="15" />
                            Hapus Data
                        </button>

                    </div>

                </div>
            </div>
        </Transition>
    </Teleport>
</template>

<style scoped>
.modal-enter-active,
.modal-leave-active {
    transition: opacity 0.2s ease;
}

.modal-enter-from,
.modal-leave-to {
    opacity: 0;
}

.modal-enter-active>div,
.modal-leave-active>div {
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.modal-enter-from>div,
.modal-leave-to>div {
    transform: scale(0.95);
    opacity: 0;
}
</style>
```