<script setup>
import { ref, watch } from "vue";
const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue: { type: Boolean, required: true },
  color: { type: String, required: false }
});
const dialogVisible = ref(props.modelValue);
watch(() => props.modelValue, (newValue) => {
  dialogVisible.value = newValue;
});
watch(() => dialogVisible.value, (newValue) => {
  emit("update:modelValue", newValue);
});
</script>

<template>
  <v-dialog
      v-model="dialogVisible"
      persistent
      max-width="400"
      class="rounded-xl"
  >
    <v-card :color="props.color || 'surface'" elevation="10" class="pa-4 rounded-xl">
      <v-card-title class="text-h6 text-center">
        <slot name="title">Please wait</slot>
      </v-card-title>

      <v-card-text class="text-center">
        <v-progress-circular
            indeterminate
            size="40"
            width="4"
            color="primary"
            class="mb-4"
        />
        <div>
          <slot>Loading data, please wait...</slot>
        </div>
      </v-card-text>
    </v-card>
  </v-dialog>
</template>
