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

<template>
  <div class="flex-col-center space-y-3">
    <ion-icon :icon="icon" class="text-5xl text-lime-500" />
    <div class="text-xl font-semibold">
      {{ title }}
    </div>
    <p class="text-center text-text-400 max-w-xs">
      {{ description }}
    </p>
    <slot name="extra" />
  </div>
</template>

<style lang='css' scoped></style>
