<!-- @format -->

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

<template>
  <div class="flex items-center justify-center w-full">
    <div class="flex items-center flex-col w-76 text-#999999">
      <slot name="icon" />
      <div v-if="!$slots.icon">
        <img
          src="~/assets/images/featured_empty.png"
          alt=""
          class="w-200px h-200px"
          srcset=""
        >
      </div>
      <div class="mb-4px mt-24px font-size-4 fw-500 line-height-6 break-all">
        {{ title }}
      </div>
      <div class="mb-6 font-size-3.5 fw-400 line-height-5 text-center">
        {{ description }}
      </div>
      <div class="flex gap-4">
        <slot />
      </div>
    </div>
  </div>
</template>