<script setup>
import { ref, watch } from "vue";
const props = defineProps({
  title: { type: String, required: false, default: "Notice" },
  modelValue: { type: Boolean, required: true },
  message: { type: String, required: false, default: "Something happened." },
  buttonText: { type: String, required: false, default: "OK" },
  type: { type: String, required: false, default: "primary" },
  width: { type: String, required: false, default: "auto" }
});
const emit = defineEmits(["update:modelValue", "resolve"]);
const dialogVisible = ref(props.modelValue);
watch(() => props.modelValue, (val) => {
  dialogVisible.value = val;
});
watch(dialogVisible, (val) => {
  if (!val) emit("update:modelValue", false);
});
const handleClose = () => {
  dialogVisible.value = false;
  emit("resolve", true);
};
</script>

<template>
  <v-row justify="center">
    <v-dialog
        v-model="dialogVisible"
        persistent
        :width="props.width"
    >
      <v-card>
        <v-toolbar
            :color="props.type"
            :title="props.title"
            density="compact"
        />
        <v-card-text class="text-body-2 text-center py-4">
          {{ props.message }}
        </v-card-text>
        <v-card-actions class="justify-center">
          <v-btn
              :color="props.type"
              variant="elevated"
              @click="handleClose"
          >
            {{ props.buttonText }}
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-row>
</template>
