Avatar.

<figure class="ui-sample ui-avatar" data-avatar="true"><span aria-hidden="true">MI</span><figcaption><strong>Martín Illanes</strong><small>Administrador</small></figcaption></figure>

<figure class="ui-sample ui-avatar border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-avatar="true"><span aria-hidden="true">MI</span><figcaption class="text-sm text-slate-600"><strong>Martín Illanes</strong><small class="text-sm text-slate-600">Administrador</small></figcaption></figure>

export interface AvatarProps {
  /** Nombre completo de la persona. */
  name?: string;
  /** Iniciales visibles; por defecto se derivan de `name` (ver la regla en el JSDoc del componente). */
  initials?: string;
  /** Línea secundaria bajo el nombre: rol, equipo o correo. */
  description?: string;
  /** Foto de la persona; si llega, reemplaza a las iniciales. Es decorativa (`alt=""`, el nombre accesible es el pie) y carga con `loading="lazy"`. */
  imageSrc?: string;
  className?: string;
}

// Partículas de apellidos compuestos que no aportan inicial («de la Fuente», «del Río»).
const PARTICULAS = new Set(["de", "del", "la", "las", "los", "y", "da", "das", "do", "dos", "van", "von", "di"]);

function inicialesDe(nombre: string) {
  const todas = nombre.trim().split(/\s+/).filter(Boolean);
  const palabras = todas.filter((palabra) => !PARTICULAS.has(palabra.toLocaleLowerCase("es")));
  const lista = palabras.length ? palabras : todas;
  if (!lista.length) return "";
  const primera = Array.from(lista[0])[0] ?? "";
  // Con dos palabras, la última; con tres o más, la penúltima: en «Nombre Paterno Materno» es el apellido paterno.
  const otra = lista.length > 2 ? lista[lista.length - 2] : lista.length > 1 ? lista[lista.length - 1] : "";
  const segunda = otra ? Array.from(otra)[0] ?? "" : "";
  return `${primera}${segunda}`.toLocaleUpperCase("es");
}

/**
 * Identificación de una persona con iniciales o foto, nombre y rol, para menús de cuenta, autores y listas de miembros.
 *
 * Las iniciales y la foto son decorativas (`aria-hidden`, `alt=""`): el nombre accesible es el texto del pie. Las iniciales salen de la primera palabra y del apellido paterno: con dos palabras, la última; con tres o más, la penúltima («Josefina Araya Muñoz» da JA). Si el nombre sigue otro orden («María José Pérez»), pasa `initials`.
 *
 * @example <Avatar name="Josefina Araya Muñoz" description="Analista de datos" />
 * @example <Avatar name="Martín Illanes" description="Administrador" imageSrc="/fotos/martin-illanes.jpg" />
 */
export function Avatar({
  name = "Martín Illanes",
  initials,
  description = "Administrador",
  imageSrc,
  className,
}: AvatarProps) {
  const siglas = initials ?? inicialesDe(name);
  if (!imageSrc && !siglas && !name && !description) return null;
  return (
    <figure className={["ui-avatar", className].filter(Boolean).join(" ")} data-avatar>
      {imageSrc ? <img src={imageSrc} alt="" loading="lazy" /> : siglas ? <span aria-hidden="true">{siglas}</span> : null}
      {name || description ? (
        <figcaption>
          {name ? <strong>{name}</strong> : null}
          {description ? <small>{description}</small> : null}
        </figcaption>
      ) : null}
    </figure>
  );
}