<template>
    <v-card width="100%" :disabled="loading" :loading="loading">
        <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5 px-7 text-center">
            <span> {{ promptTitle }}</span>

            <span v-if="message" class="text-error mt-2">
                {{ message }} Do you want to delete anyway?
            </span>
        </v-card-text>

        <v-toolbar class="pa-0" density="compact">
            <v-row no-gutters>
                <v-col cols="6" class="pa-0">
                    <v-btn block variant="text" class="text-none" size="large" tile @click="emit('close')"
                        height="48">
                        Cancel
                    </v-btn>
                </v-col>

                <v-col cols="6" class="pa-0">
                    <v-btn block tile variant="flat" class="text-none" size="large" height="48" color="black"
                        @click="emit('delete')">
                        Delete
                    </v-btn>
                </v-col>
            </v-row>
        </v-toolbar>
    </v-card>
</template>

<script setup lang="ts">
const props = defineProps({
    message: {
        type: String,
        default: ""
    },
    promptTitle: {
        type: String,
        default: "Are you sure want to delete this? "
    },
    loading: {
        type: Boolean,
        default: false
    }
})

const emit = defineEmits(["close", "delete"])

</script>

<style scoped></style>