<script setup>
import UiMascota from './UiMascota.vue'

// Una pantalla vacía es la primera que ve alguien que recién empieza, y la que
// más veces ve el que todavía no configuró algo. Decir "Sin canales" y nada
// más deja al usuario resolviendo solo qué significa eso y qué hacer.
//
// La mascota lleva el estado: dormida cuando no pasó nada todavía, buscando
// cuando falta cargar información, alerta cuando algo se rompió. Se lee antes
// que el texto.
defineProps({
  // Estado de Umi. Sin él, cae en 'durmiendo', que es el caso más común.
  estado: { type: String, default: 'durmiendo' },
  titulo: String,
  detalle: String,
  // Escape para los pocos casos donde un emoji dice más que la mascota.
  icono: { type: String, default: '' },
})
</script>

<template>
  <div class="flex flex-col items-center justify-center text-center py-12 px-6">
    <div v-if="icono" class="text-3xl mb-3 opacity-70">{{ icono }}</div>
    <UiMascota v-else :estado="estado" :tam="64" class="mb-3 text-brand" />

    <p class="text-sm font-medium text-texto">{{ titulo }}</p>
    <p v-if="detalle" class="text-xs text-tenue mt-1.5 max-w-sm leading-relaxed">{{ detalle }}</p>
    <div v-if="$slots.default" class="mt-4"><slot /></div>
  </div>
</template>
