Selector de cuenta.

<section class="ui-sample ui-form ui-account-chooser" data-account-chooser="true"><header><h3>Elige una cuenta</h3><p>Continuarás a Firmas y Documentos.</p></header><ul><li><button class="ui-account-choice" type="button" aria-current="true"><span class="ui-account-choice__icon"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="4"></circle><path d="M4 21c0-4 3-7 8-7s8 3 8 7"></path></svg></span><span class="ui-account-choice__copy"><strong>Martín Illanes</strong><small>martin@example.cl · innovacionsantiago.cl</small></span><span class="ui-account-choice__badge">Última usada</span><svg class="ui-account-choice__arrow" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 5 7 7-7 7"></path></svg></button></li><li><button class="ui-account-choice" type="button" aria-current="false"><span class="ui-account-choice__icon ui-account-choice__icon--cochid"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="5" width="14" height="14"></rect><path d="M9 19v-5h6v5M9 9h.01M15 9h.01"></path></svg></span><span class="ui-account-choice__copy"><strong>Cuenta de revisión</strong><small>revision@example.cl · COCHID</small></span><span class="ui-account-choice__badge">Última usada</span><svg class="ui-account-choice__arrow" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 5 7 7-7 7"></path></svg></button></li></ul><button class="btn btn--secondary" type="button"><svg class="ui-action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M12 5v14M5 12h14"></path></svg>Usar otra cuenta</button></section>

<section class="ui-sample ui-form ui-account-chooser border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-account-chooser="true"><header class="flex flex-wrap items-center justify-between gap-3"><h3>Elige una cuenta</h3><p>Continuarás a Firmas y Documentos.</p></header><ul class="grid gap-2"><li><button class="ui-account-choice border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button" aria-current="true"><span class="ui-account-choice__icon"><svg class="h-auto w-full" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="4"></circle><path d="M4 21c0-4 3-7 8-7s8 3 8 7"></path></svg></span><span class="ui-account-choice__copy"><strong>Martín Illanes</strong><small class="text-sm text-slate-600">martin@example.cl · innovacionsantiago.cl</small></span><span class="ui-account-choice__badge">Última usada</span><svg class="ui-account-choice__arrow h-auto w-full" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 5 7 7-7 7"></path></svg></button></li><li><button class="ui-account-choice border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button" aria-current="false"><span class="ui-account-choice__icon ui-account-choice__icon--cochid"><svg class="h-auto w-full" viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="5" width="14" height="14"></rect><path d="M9 19v-5h6v5M9 9h.01M15 9h.01"></path></svg></span><span class="ui-account-choice__copy"><strong>Cuenta de revisión</strong><small class="text-sm text-slate-600">revision@example.cl · COCHID</small></span><span class="ui-account-choice__badge">Última usada</span><svg class="ui-account-choice__arrow h-auto w-full" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 5 7 7-7 7"></path></svg></button></li></ul><button class="btn btn--secondary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button"><svg class="ui-action-icon h-auto w-full" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M12 5v14M5 12h14"></path></svg>Usar otra cuenta</button></section>

import type { MouseEventHandler } from "react";

export interface AccountChooserItem {
  /** Nombre de la persona o de la cuenta. */
  name: string;
  email: string;
  /** Sigla de la organización; se muestra después del correo. */
  organization?: string;
  /** `cochid` muestra el ícono de organización con el color de COCHID; `person`, el de persona. */
  icon?: "person" | "cochid";
  /** Marca breve junto a la cuenta, como «Última usada». */
  badge?: string;
  /** Cuenta seleccionada: emite `aria-current="true"`. */
  current?: boolean;
}

export interface AccountChooserProps {
  title?: string;
  /** Producto al que continuará la persona. */
  description?: string;
  items?: AccountChooserItem[];
  /** Se llama al elegir una cuenta, con la cuenta y su posición. */
  onSelect?: (item: AccountChooserItem, index: number) => void;
  /** Texto del botón para entrar con una cuenta que no está en la lista. */
  otherAccountLabel?: string;
  onOtherAccount?: MouseEventHandler<HTMLButtonElement>;
  className?: string;
}

const ACCOUNT_CHOOSER_ITEMS: AccountChooserItem[] = [
  { name: "Martín Illanes", email: "martin@example.cl", organization: "innovacionsantiago.cl", icon: "person", badge: "Última usada", current: true },
  { name: "Cuenta de revisión", email: "revision@example.cl", organization: "COCHID", icon: "cochid", badge: "Última usada", current: false },
];

/**
 * Selector de cuenta, para cuando la persona tiene varias sesiones de cis-auth y debe elegir con cuál continuar.
 *
 * La cuenta elegida lleva `current`; el estado llega por props y `onSelect` avisa la elección.
 *
 * @example <AccountChooser description="Continuarás a Datos." items={[{ name: "Ana Pérez", email: "ana@example.cl", organization: "innovacionsantiago.cl", current: true }]} onSelect={elegir} />
 */
export function AccountChooser({
  title = "Elige una cuenta",
  description = "Continuarás a Firmas y Documentos.",
  items = ACCOUNT_CHOOSER_ITEMS,
  onSelect,
  otherAccountLabel = "Usar otra cuenta",
  onOtherAccount,
  className,
}: AccountChooserProps) {
  return (
    <section className={["ui-form ui-account-chooser", className].filter(Boolean).join(" ")} data-account-chooser>
      <header>
        <h3>{title}</h3>
        {description ? <p>{description}</p> : null}
      </header>
      {items.length ? (
        <ul>
          {items.map((item, i) => (
            <li key={i}>
              <button
                className="ui-account-choice"
                type="button"
                aria-current={item.current ? "true" : "false"}
                onClick={onSelect ? () => onSelect(item, i) : undefined}
              >
                {item.icon === "cochid" ? (
                  <span className="ui-account-choice__icon ui-account-choice__icon--cochid">
                    <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="5" width="14" height="14"></rect><path d="M9 19v-5h6v5M9 9h.01M15 9h.01"></path></svg>
                  </span>
                ) : (
                  <span className="ui-account-choice__icon">
                    <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="4"></circle><path d="M4 21c0-4 3-7 8-7s8 3 8 7"></path></svg>
                  </span>
                )}
                <span className="ui-account-choice__copy">
                  <strong>{item.name}</strong>
                  <small>{item.organization ? `${item.email} · ${item.organization}` : item.email}</small>
                </span>
                {item.badge ? <span className="ui-account-choice__badge">{item.badge}</span> : null}
                <svg className="ui-account-choice__arrow" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 5 7 7-7 7"></path></svg>
              </button>
            </li>
          ))}
        </ul>
      ) : null}
      {otherAccountLabel ? (
        <button className="btn btn--secondary" type="button" onClick={onOtherAccount}>
          <svg className="ui-action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M12 5v14M5 12h14"></path></svg>
          {otherAccountLabel}
        </button>
      ) : null}
    </section>
  );
}