<script lang="ts" setup>
interface Props {
  icon?: string
  title: string
  description?: string
  actionLabel?: string
  actionTo?: string
}

withDefaults(defineProps<Props>(), {
  icon: 'tabler-inbox',
  description: undefined,
  actionLabel: undefined,
  actionTo: undefined,
})

const emit = defineEmits<{ action: [] }>()
</script>

<template>
  <div class="d-flex flex-column align-center justify-center pa-12 text-center">
    <VAvatar size="80" color="default" variant="tonal" class="mb-6">
      <VIcon :icon="icon" size="40" />
    </VAvatar>
    <h3 class="text-h6 mb-2">{{ title }}</h3>
    <p v-if="description" class="text-body-2 text-medium-emphasis mb-6" style="max-width: 360px;">
      {{ description }}
    </p>
    <VBtn
      v-if="actionLabel"
      :to="actionTo"
      color="primary"
      @click="emit('action')"
    >
      {{ actionLabel }}
    </VBtn>
  </div>
</template>
