<template>
  <div class="flex flex-col items-center justify-center text-center py-10 px-4">
    <h3 class="text-base font-semibold text-ink-strong">{{ title }}</h3>
    <p v-if="description" class="mt-2 text-sm text-ink-secondary max-w-md">
      {{ description }}
    </p>
    <div v-if="$slots.action" class="mt-4">
      <slot name="action" />
    </div>
  </div>
</template>

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