<template>
  <div class="flex flex-col items-center justify-center py-12 px-4">
    <div class="text-6xl mb-4">{{ icon }}</div>
    <h3 class="text-lg font-semibold text-base-content mb-2">{{ title }}</h3>
    <p v-if="description" class="text-base-content/60 text-center max-w-sm mb-6">{{ description }}</p>
    <NuxtLink v-if="actionTo" :to="actionTo">
      <button class="btn btn-primary">
        <Icon v-if="actionIcon" :name="actionIcon" size="18" class="mr-2" />
        {{ actionLabel }}
      </button>
    </NuxtLink>
    <button v-else-if="actionLabel" class="btn btn-primary" @click="$emit('action')">
      <Icon v-if="actionIcon" :name="actionIcon" size="18" class="mr-2" />
      {{ actionLabel }}
    </button>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  icon: string
  title: string
  description?: string
  actionLabel?: string
  actionTo?: string
  actionIcon?: string
}>()

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