<!-- SimpleSnackbar.vue -->
<template>
  <v-dialog persistent :max-width="width" v-model="localVisible">
    <v-card>
      <v-toolbar elevation="4" :title="title" :color="color"></v-toolbar>
      <v-card-text v-html="message"></v-card-text>

      <v-card-actions class="px-5">
        <v-spacer></v-spacer>

        <v-btn
          color="error"
          size="large"
          :text="$t('message.close')??'TUTUP'"
          @click="closeDialog()"
        ></v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
  export default {
    props: {
      modelValue: {
        type: Boolean,
        default: false,
      },
      message: {
        type: String,
        default: "",
      },
      title: {
        type: String,
        default: "",
      },
      color: {
        type: String,
        default: "success",
      },
      width: {
        type: String,
        default: "500",
      },
      onClose: {
        type: Function,
        default: () => {},
      },
    },
    computed: {
      localVisible: {
        get() {
          return this.modelValue;
        },
        set(value) {
          if (!value) {
            // console.log("aksjdhs");
            this.onClose(); // Panggil hanya saat dialog ditutup
          }
          this.$emit("update:modelValue", value);
        },
      },
    },
    methods: {
      closeDialog() {
        // this.onClose;
        this.localVisible = false;
      },
    },
  };
</script>
