<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-brand">
              {{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-brand">
              {{message1}}
            </div>
          </div>
        </div>

        <div v-if="message2" class="text-caption" align="center">
          {{message2}}
        </div>
      </div>
    </div>
</template>

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

  const emit = defineEmits(['btn-click'])

  const handleClick = () => {
    emit('btn-click')
  }

</script>
<style>
</style>