<template>
  <div class="flex flex-col items-center justify-center py-12 text-center">
    <div class="w-16 h-16 mb-4 flex items-center justify-center rounded-full bg-surface">
      <svg class="w-8 h-8 text-secondary" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M9 17v-6a2 2 0 012-2h2a2 2 0 012 2v6m-6 0h6m-6 0H7m14 0a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2h12z"/>
      </svg>
    </div>
    <h2 class="text-lg font-bold text-text mb-2">{{ title }}</h2>
    <p class="text-text-muted text-sm mb-6 max-w-sm">{{ message }}</p>
    <button
      v-if="ctaText"
      class="btn-primary"
      @click="$emit('action')"
    >
      {{ ctaText }}
    </button>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  title: string;
  message: string;
  ctaText?: string;
}>();

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