<script setup lang="ts">
import { ref } from "vue";
const dialog = ref(false)
defineExpose({
  dialog
});

// const model = defineModel<boolean>();

const props = defineProps({
  dialogTitle: {
    type: String,
    default: 'Confirm Action'
  },

  dialogMessage: {
    type: String,
    default: 'Are you sure you want to perform this action?'
  }
});

const emit = defineEmits(['confirm']);

function handleConfirmDialog(data: any) {
  emit('confirm'); // Memberitahu parent untuk tambah data
  dialog.value = false; // Tutup dialog
}


</script>

<template>
  <v-dialog v-model="dialog" persistent class="dialog-mw" max-width="500">
    <template v-slot:activator="{ props }">
        <v-btn color="warning" class="w-100" v-bind="props" flat> Open Confirm Dialog </v-btn>
      </template>
    <v-card class="pa-6">
      <v-card-title class="text-h5">
        {{ dialogTitle}}
      </v-card-title>
      <v-card-text>{{ dialogMessage }}</v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="error" variant="tonal" @click="dialog = false" flat>
          Tidak
        </v-btn>
        <v-btn color="success" variant="tonal" @click="handleConfirmDialog(1)" flat>
          Ya
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>
