<script setup lang="ts">
defineProps<{
  heading: string
  description?: string
  ctaText?: string
  ctaHref?: string
}>()
</script>

<template>
  <div class="text-center py-16">
    <svg class="mx-auto h-12 w-12 text-slate-300 dark:text-slate-600 mb-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
    </svg>
    <h3 class="text-lg font-medium text-slate-700 dark:text-slate-300 mb-2">{{ heading }}</h3>
    <p v-if="description" class="text-sm text-slate-500 dark:text-slate-400 max-w-md mx-auto">{{ description }}</p>
    <a
      v-if="ctaText && ctaHref"
      :href="ctaHref"
      class="inline-block mt-4 text-sm text-accent-600 dark:text-accent-400 hover:underline"
    >{{ ctaText }}</a>
  </div>
</template>
