📘 useServices

Función que permite consumir servicios declarados dentro de una vertical en una aplicación Nuxt 3 (Vue), integrando soporte multilenguaje con fallback automático y dos modos de consumo:

• ✅ Modo síncrono: Devuelve directamente los datos (Promise<T>).
• 🔄 Modo reactivo: Devuelve un objeto con los datos y un estado isPending ({ data, isPending }), ideal para integrar con v-if, v-show o skeletons.

---

📌 Características

• Llama un servicio con un idioma principal (lang) y, si los datos están vacíos o incompletos, hace una segunda llamada con un idioma alternativo (fallback). Esto incluye campos específicos como title, description, etc. que falten en un idioma.
• Mezcla ambos resultados, priorizando los campos disponibles en el idioma principal.
• Funciona con cualquier servicio que tenga la firma FunctionService<T>.
• Modo reactivo opcional.

---

✳️ Firma

function useServices<T, U = undefined>(
  service: keyof Verticals["services"],
  params?: U
): Promise<T>;

function useServices<T, U = undefined>(
  service: keyof Verticals["services"],
  params: U | undefined,
  options: { reactive: true }
): Promise<{ data: Ref<T | null>; isPending: Ref<boolean> }>;

---

📥 Parámetros

Parámetro	Tipo	Descripción
service	keyof Verticals['services']	Nombre del servicio dentro de la vertical activa.
params	U (opcional)	Parámetros a enviar al servicio.
options	{ reactive: true } (opcional)	Si se indica, se usa el modo reactivo.

---

🔁 Comportamiento de Fallback

1. Llama al servicio con el idioma actual (lang).
2. Si los datos están vacíos (null, objeto vacío, array vacío, string vacío), intenta con el idioma alternativo.
3. Fusiona ambos resultados con prioridad al idioma principal.

---

✅ Ejemplos de uso

▶️ Modo 1: Uso directo (Promise)

Ideal cuando no necesitas loading, como en SSR, páginas estáticas o cuando se controla loading manualmente.

const data = await useServices<Blog[], FilterParams>("blogs", {
  category: "tech",
  limit: 10,
});

---

⏳ Modo 2: Reactivo (con isPending)

Perfecto para usar con <Skeleton>, loaders, v-if, etc.

const { data: dataPremium, isPending } = await useServices<PremiumPage>(
  "premium",
  undefined,
  { reactive: true }
);

Y luego en tu componente: (estos no son los componentes reales, es solo un ejemplo)

<template>
  <Skeleton v-if="isPending" />
  <PremiumContent v-else :data="dataPremium" />
</template>

---

🧠 Tips

• Si el idioma actual no tiene todos los datos traducidos, los campos faltantes se completan automáticamente desde el idioma alternativo.
• El tipo T debe reflejar el resultado esperado del servicio.
• Para arrays, la mezcla por índice intenta complementar elemento por elemento.

---

🧪 Validación de datos vacíos

Una respuesta se considera inválida si:

• Es null o undefined.
• Es un [] vacío.
• Es un objeto sin propiedades ({}).
• Es una cadena vacía o con solo espacios ('' o ' ').

---