<script setup lang="ts">
// defineModel membuat variabel 'modelValue' yang otomatis sinkron dengan Parent
const isOpen = defineModel<boolean>({ default: false });

const props = defineProps({
  title: { type: String, default: 'Konfirmasi' },
  message: { type: String, default: '' }
});

const emit = defineEmits(['action-ya']);

const handleYa = () => {
  emit('action-ya'); // Kirim sinyal ke parent untuk proses data
  isOpen.value = false; // Tutup modal
};
</script>

<template>
  <v-dialog v-model="isOpen" persistent max-width="450">
    <v-card class="pa-4" rounded="xl">
      <v-card-title class="text-h5 font-weight-bold">
        {{ title }}
      </v-card-title>

      <v-card-text class="text-body-1">
        {{ message }}
      </v-card-text>

      <v-card-actions>
        <v-spacer></v-spacer>

        <v-btn
            color="pink-lighten-5"
            class="text-pink-accent-2 px-6"
            variant="flat"
            rounded="lg"
            @click="isOpen = false"
        >
          Tidak
        </v-btn>

        <v-btn
            color="cyan-lighten-5"
            class="text-cyan-darken-1 px-6"
            variant="flat"
            rounded="lg"
            @click="handleYa"
        >
          Ya
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>
