<template>
  <q-dialog v-model="modelValue">
    <q-card
      class="q-pa-none q-ma-none w100 no-scroll rounded-card" 
      align="center"
      >
      <q-card-section>
        <q-avatar :color :icon size="60px"  font-size="45px" text-color="white"/>
      </q-card-section>

      <q-card-section
        class="wrap no-scroll q-gutter-y-lg q-pt-none "
        style="overflow-wrap: break-word"
        >
        <div class="text-h6 text-bold ">
          {{ $t(title) }}
        </div>
      <div v-if="message1">
        {{ $t(message1) }}
      </div>
      <div v-if="message2">
        {{ $t(message2) }}
      </div>
      </q-card-section>

      <q-card-section>
        <div class="flex column w100 q-mt-lg q-px-sm">
          <div class="flex q-gutter-md">
            <div class="col-grow" v-if="auxBtnLabel">
              <q-btn
                :label="$t(auxBtnLabel)"
                outline
                color="grey"
                class="w100"
                v-close-popup
                rounded
                @click="emit('clickAuxBtn')"
              />
            </div>
            <div class="col-grow" v-if="!hideMainBtn">
              <q-btn
                :label="$t(mainBtnLabel)"
                :color="color"
                class="w100"
                v-close-popup
                rounded
                @click="emit('clickMainBtn')"
              />
            </div>
          </div>
        
          <q-btn
            class="w100 q-mt-md q-mb-sm" flat 
            v-close-popup rounded
            @click="emit('close')"
            >
            <div class="flex items-center">
              <q-icon name="close"/>
              {{ $t('close') }}
            </div>
          </q-btn>
        </div>

      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
  withDefaults(defineProps<{
    icon?: string
    color?: string
    title: string
    message1?: string
    message2?: string
    mainBtnLabel: string
    auxBtnLabel?: string
    hideMainBtn?: boolean
  }>(), { 
    hideMainBtn: false
  })

  const modelValue = defineModel<boolean>({
    required: true
  })

  const emit = defineEmits([
    'clickMainBtn',
    'clickAuxBtn',
    'close'
  ])
</script>
