<script setup lang="ts">
defineProps<{
  title: string;
  message: string;
  color?: string;
  icon?: string;
  actionText?: string;
  cancelText?: string;
  persistent?: boolean;
  action?: (...args: unknown[]) => void;
  cancel?: (...args: unknown[]) => void;
}>();
</script>
<template>
  <q-dialog ref="dialogRef" :persistent="persistent || false">
    <q-card
      class="q-pt-sm"
      style="overflow: visible; min-width: 300px; max-width: 80%"
    >
      <div
        class="box-icon q-pa-sm"
        v-if="icon"
        style="display: flex; align-items: center"
      >
        <q-avatar
          size="60px"
          font-size="25px"
          style="background-color: var(--surface-1)"
          :text-color="color || 'primary'"
        >
          <q-icon
            style="padding: 12px; border: 2px solid; border-radius: 50%"
            :name="icon"
          />
        </q-avatar>
      </div>

      <div class="text-right q-px-sm">
        <q-btn
          flat
          size="sm"
          padding="none"
          color="grey"
          icon="mdi-close"
          v-close-popup
        />
      </div>

      <q-card-section class="column items-center q-pa-sm">
        <div class="column q-mt-md items-center">
          <span class="text-bold block">{{ title }}</span>
          <span class="block">{{ message }}</span>
        </div>
      </q-card-section>

      <q-card-actions
        :class="{ 'no-padding': !action || !cancel }"
        align="right"
        v-if="action || cancel"
      >
        <q-btn
          id="btn-cancel-dialog"
          v-if="cancel"
          :class="{ 'full-width': !action }"
          @click="cancel"
          :label="cancelText || $t('cancel')"
          :color="color || 'primary'"
          v-close-popup
          flat
        />

        <q-btn
          id="btn-ok-dialog"
          :class="{ 'full-width': !cancel }"
          v-if="action"
          @click="action"
          :label="actionText || $t('ok')"
          :color="color || 'primary'"
          v-close-popup
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<style lang="scss">
.box-icon {
  position: absolute;
  top: -40px;
  right: 37.5%;
  z-index: 999;
}

.full-width {
  width: 100%;
}
</style>
