<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">
            <v-row no-gutters>
                <v-col cols="12" class="text-h6 font-weight-bold">
                    <span class=""> {{ promptTitle }}</span>
                </v-col>
                <v-col v-if="message" cols="12" class="mt-5">
                    <span  >
                        {{ message }}
                    </span>
                </v-col>
            </v-row>
        </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="confirmButtonColor" @click="emit('proceed')">
                        {{ confirmLabel }}
                    </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
    },
    confirmLabel: {
        type: String,
        default: "Proceed"
    },
    confirmButtonColor: {
        type: String,
        default: "black"
    }

})

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

</script>

<style scoped></style>