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

<template>
  <div
    v-if="
      icon
        || $slots.icon
        || title
        || $slots.title
        || description
        || $slots.description
    "
  >
    <div v-if="icon || $slots.icon" class="mb-2 pointer-events-none">
      <slot name="icon">
        <div :class="(icon as string)" class="w-8 h-8 flex-shrink-0" />
      </slot>
    </div>

    <p
      v-if="title || $slots.title"
      class="text-2xl text-center sm:text-left text-gray-900 dark:text-white font-bold"
    >
      <slot name="title">
        {{ title }}
      </slot>
    </p>

    <p
      v-if="description || $slots.description"
      class="text-muted-foreground text-sm mt-1 text-center sm:text-left"
    >
      <slot name="description">
        {{ description }}
      </slot>
    </p>
  </div>
</template>
