---
/**
 * 🎯 LimboImage - Componente wrapper para imágenes de Limbo
 * 
 * Este componente simplifica el uso de imágenes de Limbo en componentes Astro.
 * Extrae automáticamente la URL del JSON de Limbo y maneja URLs relativas.
 * 
 * @example
 * // Uso simple - el src puede ser URL directa o JSON de Limbo
 * <LimboImage src={imagenDeLimbo} alt="Descripción" />
 * 
 * @example
 * // Con clases personalizadas
 * <LimboImage 
 *   src={imagenDeLimbo} 
 *   alt="Hero image"
 *   class="w-full h-auto rounded-lg"
 * />
 * 
 * @example
 * // Preferir imagen original en lugar del crop
 * <LimboImage src={imagenDeLimbo} prefer="original" />
 * 
 * @example
 * // Con fallback si no hay imagen
 * <LimboImage src={imagenDeLimbo} fallback="/default.jpg" />
 */

import { extractImageUrl } from '../lib/functions.js';

interface Props {
    /** Valor de imagen - puede ser URL directa o JSON de Limbo */
    src: string;
    /** Texto alternativo (requerido para accesibilidad) */
    alt: string;
    /** Título opcional para tooltip */
    title?: string;
    /** Clases CSS adicionales */
    class?: string;
    /** Preferir 'crop' (recorte) u 'original' */
    prefer?: 'crop' | 'original';
    /** Imagen fallback si src está vacío o es inválido */
    fallback?: string;
    /** Carga diferida (por defecto: lazy) */
    loading?: 'lazy' | 'eager';
    /** Decodificación (por defecto: async) */
    decoding?: 'async' | 'sync' | 'auto';
    /** Ancho explícito (para CLS) */
    width?: number | string;
    /** Alto explícito (para CLS) */
    height?: number | string;
    /** Usar entorno de producción para URLs relativas */
    isProd?: boolean;
    /** Atributos HTML adicionales */
    [key: string]: any;
}

const { 
    src, 
    alt, 
    title,
    class: className,
    prefer = 'crop',
    fallback = '',
    loading = 'lazy',
    decoding = 'async',
    width,
    height,
    isProd = false,
    ...restProps 
} = Astro.props;

// Extraer URL usando la función centralizada
const imageUrl = extractImageUrl(src, { prefer, isProd }) || fallback;
---

{imageUrl && (
    <img 
        src={imageUrl}
        alt={alt}
        title={title}
        class={className}
        loading={loading}
        decoding={decoding}
        width={width}
        height={height}
        {...restProps}
    />
)}