<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="320"
      class="rounded-lg"
  >
    <v-card :color="props.color || 'surface'" class="pa-3 rounded-lg d-flex flex-column align-center">
      <v-icon size="36" color="primary" class="mb-2">mdi mdi-printer</v-icon>
      <div class="text-center text-body-2">
        <slot>Preparing to print...</slot>
      </div>
    </v-card>
  </v-dialog>
</template>
