<template>
  <div class="empty-state text-center py-12 px-6">
    <div class="empty-icon mb-6">
      <slot name="icon">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-20 h-20 mx-auto text-base-content/20">
          <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
        </svg>
      </slot>
    </div>
    <h3 class="text-xl font-semibold mb-2 text-base-content">{{ title }}</h3>
    <p class="text-base-content/60 mb-6 max-w-md mx-auto">{{ description }}</p>
    <slot name="action">
      <button v-if="actionLabel" @click="$emit('action')" class="btn btn-primary">
        {{ actionLabel }}
      </button>
    </slot>
  </div>
</template>

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

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

<style scoped>
.empty-state {
  @apply animate-fade-in;
}
</style>
