Identidad de cuenta.

<div class="ui-sample ui-service" data-account-badge="true"><span aria-hidden="true">MI</span><div><strong>Martín Illanes</strong><span>Cuenta verificada</span></div><a class="btn btn--quiet" href="#cuenta">Ver cuenta</a></div>

<div class="ui-sample ui-service border border-slate-300 bg-white p-4 text-slate-950" data-account-badge="true"><span aria-hidden="true">MI</span><div><strong>Martín Illanes</strong><span>Cuenta verificada</span></div><a class="btn btn--quiet underline underline-offset-4" href="#cuenta">Ver cuenta</a></div>

export interface AccountBadgeProps {
  /** Nombre de la persona con sesión iniciada. */
  name?: string;
  /** Iniciales visibles; por defecto, la primera letra de la primera y la última palabra de `name`. */
  initials?: string;
  /** Línea bajo el nombre: estado de la cuenta, rol u organización («Administradora · Equipo de datos»). */
  description?: string;
  /** Destino de la página de la cuenta; vacío oculta el enlace. */
  href?: string;
  /** Texto del enlace a la cuenta; vacío oculta el enlace. */
  linkLabel?: string;
  className?: string;
}

function inicialesDe(nombre: string) {
  const palabras = nombre.trim().split(/\s+/).filter(Boolean);
  if (!palabras.length) return "";
  const primera = Array.from(palabras[0])[0] ?? "";
  const ultima = palabras.length > 1 ? Array.from(palabras[palabras.length - 1])[0] ?? "" : "";
  return `${primera}${ultima}`.toLocaleUpperCase("es");
}

/**
 * Identificación de la cuenta con sesión iniciada, con iniciales, nombre, estado o rol y enlace a la cuenta; se usa en paneles de servicio y cabeceras de herramientas internas.
 *
 * Las iniciales son decorativas (`aria-hidden`): el nombre accesible es el texto del nombre. El enlace a la cuenta es una acción terciaria (`btn--quiet`).
 *
 * @example <AccountBadge name="Martín Illanes" description="Cuenta verificada" href="/cuenta" />
 * @example <AccountBadge name="Josefina Aguilera" description="Verificación pendiente" href="/cuenta/verificar" linkLabel="Completar verificación" />
 */
export function AccountBadge({
  name = "Martín Illanes",
  initials,
  description = "Cuenta verificada",
  href = "#cuenta",
  linkLabel = "Ver cuenta",
  className,
}: AccountBadgeProps) {
  const iniciales = initials ?? inicialesDe(name);
  return (
    <div className={["ui-service", className].filter(Boolean).join(" ")} data-account-badge>
      {iniciales ? <span aria-hidden="true">{iniciales}</span> : null}
      <div>
        <strong>{name}</strong>
        {description ? <span>{description}</span> : null}
      </div>
      {href && linkLabel ? <a className="btn btn--quiet" href={href}>{linkLabel}</a> : null}
    </div>
  );
}