<script setup>
defineProps({
  title: {
    type: String,
    default: "",
  },
});
</script>

<template>
  <div
    class="flex gap-3 rounded-md border border-blue-200 bg-blue-50 px-4 py-3 text-sm text-blue-900"
    :class="{ 'items-center': !title }"
  >
    <i
      class="pi pi-info-circle text-blue-500 text-base"
      :class="{ 'mt-0.5': title }"
      aria-hidden="true"
    ></i>
    <div class="flex-1">
      <div v-if="title" class="font-medium mb-1">
        {{ title }}
      </div>
      <div>
        <slot />
      </div>
    </div>
  </div>
</template>
