<template>
  <q-dialog
    v-model="modelValue"
    >
    <q-card class="q-pa-none q-ma-none w100 no-scroll" 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-actions align="center" vertical>
        <div class="flex q-mt-lg no-wrap w100 justify-center q-gutter-x-md">
          <q-btn
            v-if="auxBtnLabel"
            :label="$t(auxBtnLabel)"
            outline
            color="grey"
            v-close-popup
            rounded
            class="w50"
            @click="emit('clickAuxBtn')"
          />

          <q-btn
            :label="$t(mainBtnLabel)"
            :color="color"
            v-close-popup
            rounded
            :class="auxBtnLabel ? 'w50' : 'w80'"
            @click="emit('clickMainBtn')"
          />
        </div>

        <q-btn
          class="w80 q-mt-md q-mb-sm" flat 
          v-close-popup rounded
          @click="emit('close')"
          >
          <div class="flex items-center">
            <q-icon name="close"/>
            {{$t('cancel')}}
          </div>
        </q-btn>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

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

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

  const emit = defineEmits([
    'clickMainBtn',
    'clickAuxBtn',
    'close'
  ])

</script>

<style>
</style>
