<template>
  <div class="flex flex-col items-center justify-center py-12 text-center">
    <div
      class="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-surface-gray-2"
    >
      <FeatherIcon :name="icon" class="h-8 w-8 text-ink-gray-4" />
    </div>
    <h3 class="mb-2 text-lg font-medium text-ink-gray-9">
      {{ title }}
    </h3>
    <p v-if="description" class="mb-4 max-w-sm text-sm text-ink-gray-5">
      {{ description }}
    </p>
    <slot name="action" />
  </div>
</template>

<script setup>
import { FeatherIcon } from 'frappe-ui'

defineProps({
  icon: {
    type: String,
    default: 'inbox',
  },
  title: {
    type: String,
    required: true,
  },
  description: {
    type: String,
    default: '',
  },
})
</script>
