<template>
  <div class="text-center py-12">
    <div v-if="icon" class="w-16 h-16 rounded-2xl bg-base-200 grid place-items-center mx-auto mb-5">
      <component :is="icon" class="w-8 h-8 text-base-content/30" aria-hidden="true" />
    </div>
    <h3 class="text-lg font-semibold text-base-content mb-1">{{ title }}</h3>
    <p v-if="description" class="text-sm text-base-content/50 mb-6">{{ description }}</p>
    <slot>
      <NuxtLink v-if="actionTo" :to="actionTo" class="btn btn-primary btn-sm">
        {{ actionLabel }}
      </NuxtLink>
      <button v-else-if="actionLabel" type="button" class="btn btn-primary btn-sm" @click="$emit('action')">
        {{ actionLabel }}
      </button>
    </slot>
  </div>
</template>

<script setup lang="ts">
import type { Component } from 'vue'

defineProps<{
  title: string
  description?: string
  icon?: Component
  actionLabel?: string
  actionTo?: string
}>()

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