/**
 * Configuración del componente `val-user-avatar`.
 *
 * Avatar smart con cadena de fallback:
 *   foto (`avatarUrl`) → iniciales (de `name`/`email`) → icono persona.
 *
 * Diseñado para headers, perfiles, listas de usuarios y dropdowns.
 *
 * @example Con user completo (greeting hero):
 * ```html
 * <val-user-avatar [props]="{ user: auth.user(), size: 'medium' }" />
 * ```
 *
 * @example Standalone fields:
 * ```html
 * <val-user-avatar [props]="{ name: 'Juan Pérez', avatarUrl: '/a.jpg', size: 'small' }" />
 * ```
 *
 * @example Header avatar clickable (link a /profile):
 * ```html
 * <val-user-avatar [props]="{ user: auth.user() }" (onClick)="goToProfile()" />
 * ```
 */
export interface UserAvatarMetadata {
    /**
     * User shape — pasa el resultado de `auth.user()` directamente. Cualquier
     * combinación de `name`/`avatarUrl`/`email` se acepta. Tienen precedencia
     * sobre los props sueltos (`name`, `email`, `avatarUrl`) abajo.
     */
    user?: {
        name?: string;
        avatarUrl?: string;
        email?: string;
        handle?: string;
    } | null;
    /** Nombre directo — usado si no hay `user` o si `user.name` está vacío. */
    name?: string;
    /** Email directo — usado si no hay `user` o si `user.email` está vacío. */
    email?: string;
    /** URL de avatar directa — usado si no hay `user` o si `user.avatarUrl` está vacío. */
    avatarUrl?: string;
    /**
     * Tamaño:
     * - `'xsmall'` 28px
     * - `'small'` (default) 32px
     * - `'medium'` 48px
     * - `'large'` 72px
     * - `'xlarge'` 96px
     */
    size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
    /**
     * Forma:
     * - `'circle'` (default) — redondo completo
     * - `'square'` — bordes redondeados pero cuadrado
     */
    shape?: 'circle' | 'square';
    /**
     * Color de fondo para el modo iniciales/icono. Cuando no se provee, se
     * derive deterministicamente del `name`/`email` (mismo input → mismo color)
     * para que el mismo user tenga siempre el mismo color.
     */
    background?: string;
    /** Color del texto/icono cuando no hay foto. Default `'#fff'`. */
    foreground?: string;
    /**
     * Mostrar border. Útil para overlays sobre fotos o backgrounds dark.
     * Default: `false`.
     */
    bordered?: boolean;
    /** Habilita grayscale (e.g., user desactivado). Default: `false`. */
    grayscale?: boolean;
    /** Clase CSS extra. */
    cssClass?: string;
}