<template>
  <div class="flex flex-col items-center justify-center py-20">
    <div
      class="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-surface-gray-2"
    >
      <slot name="icon">
        <FeatherIcon :name="icon" class="h-6 w-6 text-ink-gray-5" />
      </slot>
    </div>
    <h3 class="mb-1 text-lg font-medium text-ink-gray-9">
      {{ title }}
    </h3>
    <p class="mb-4 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,
    default: 'No data',
  },
  description: {
    type: String,
    default: '',
  },
})
</script>
