<template>
  <v-dialog
    :model-value="modelValue"
    @update:model-value="val => $emit('update:modelValue', val)"
    max-width="420"
    persistent
  >
    <v-card class="pa-4" style="border-radius:12px;">
      <v-card-title class="headline" style="font-size:1.3rem; font-weight:500;">
        {{ title }}
      </v-card-title>
      <v-card-text style="font-size:1.05rem; margin-bottom:24px;">
        {{ message }}
      </v-card-text>
      <v-card-actions class="justify-end" style="gap:12px;">
        <v-btn
          color="primary"
          variant="outlined"
          style="min-width:70px; background:#e3f2fd; color:#1976d2; font-weight:500;"
          @click="$emit('confirm')"
        >
          Yes
        </v-btn>
        <v-btn
          color="error"
          variant="outlined"
          style="min-width:70px; background:#ffebee; color:#d32f2f; font-weight:500;"
          @click="$emit('cancel')"
        >
          No
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
defineProps<{
  modelValue: boolean,
  title?: string,
  message?: string
}>();
defineEmits(['confirm', 'cancel', 'update:modelValue']);
</script>