<template>
  <div class="flex w100 column q-pt-xl q-pa-md">
    <div class="flex column justify-center col-grow items-center text-grey">
      <q-btn
        flat no-caps
        @click="handleClick"
        v-if="!noBtn"
        >
        <div class="flex column justify-center col-grow items-center">
          <q-icon :name="icon" size="160px" class="q-pb-md"/>
          <div class="text-h6 text-bold text-primary text-center">
            {{ $t(message1) }}
          </div>
        </div>
      </q-btn>
      <div v-else>
        <div class="flex column justify-center col-grow items-center">
          <q-icon :name="icon" size="160px" class="q-pb-md"/>
          <div class="text-h6 text-bold text-primary text-center">
            {{ $t(message1) }}
          </div>
        </div>
      </div>

      <div v-if="message2" class="text-caption text-center" style="max-width: min(75vw, calc(var(--body-width) * 0.75));">
        {{ $t(message2) }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  defineProps<{
    icon: string
    message1: string
    message2?: string
    noBtn?: boolean
  }>()

  const emit = defineEmits(['btn-click'])
  const handleClick = () => emit('btn-click')
</script>
