<template>
  <v-dialog
    v-bind="{ ...$props }"
    class="ma-0 pa-0"
    :width="$vuetify.display.smAndUp ? '688px' : '95%'"
    scroll-strategy="none"
    @click:outside="$emit('update:modelValue', false)"
  >
    <v-card>
      <v-card-text class="pa-4 black--text">{{ message }}</v-card-text>
      <v-card-actions class="pt-3">
        <v-spacer></v-spacer>
        <v-btn variant="flat" class="text-button" @click.stop="$emit('update:modelValue', false)">{{ $t("menu.cancel") }}</v-btn>
        <v-btn variant="flat" class="text-button" @click.stop="onOkButton">{{ $t("menu.ok") }}</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>
<script>
export default {
  name: "ConfirmationDialog",
  props: ["modelValue"],
  emits: ["update:modelValue", "ok"],
  props: {
    message: {
      type: String,
      default: "?",
    },
  },
  methods: {
    onOkButton() {
      this.$emit("ok");
      this.$emit("update:modelValue", false);
    },
  },
};
</script>
