<template>
  <v-dialog v-model="dialog" max-width="400" persistent>
    <v-card class="rounded-xl pa-6" elevation="2">
      <!-- Close Button -->
      <v-btn
        icon
        variant="text"
        size="small"
        class="position-absolute"
        style="top: 8px; right: 8px"
        @click="closeDialog"
      >
        <v-icon>mdi-close</v-icon>
      </v-btn>

      <v-card-text class="text-center">
        <v-row v-if="imageSrc" justify="center" class="py-10">
          <v-img height="120" :src="imageSrc" alt="Dialog Image" contain />
        </v-row>

        <!-- Title Slot -->
        <div class="text-h6 font-weight-medium mb-2">
          <slot name="title"></slot>
        </div>

        <!-- Description Slot -->
        <div class="text-body-1 mb-4">
          <slot name="description"></slot>
        </div>
      </v-card-text>

      <!-- Footer Slot -->
      <v-card-actions>
        <slot name="footer"></slot>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script lang="ts" setup>
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  imageSrc: {
    type: String,
    default: "",
  },
  loading: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["update:modelValue", "submit"]);

const dialog = computed({
  get: () => props.modelValue,
  set: (value) => emit("update:modelValue", value),
});

function closeDialog() {
  dialog.value = false;
}
</script>
