// ==========================================
// ChatPane Kit — TypingIndicator Component
// ==========================================
// Shows "X is typing..." below the message list.
// Handles 1, 2, or 3+ typers.
//
// v0.37.14: Initial implementation.
//
// Usage:
//   html`<${TypingIndicator} users=${[{id, name}]} />`

const html = window.html;

/**
 * @param {{ users: Array<{id: string, name: string}> }} props
 */
export function TypingIndicator({ users }) {
    if (!users || users.length === 0) return null;

    let text;
    if (users.length === 1) {
        text = users[0].name + ' is typing';
    } else if (users.length === 2) {
        text = users[0].name + ' and ' + users[1].name + ' are typing';
    } else {
        text = users[0].name + ' and ' + (users.length - 1) + ' others are typing';
    }

    return html`
        <div class="sw-typing-indicator" aria-live="polite">
            <span class="sw-typing-indicator__dots">
                <span class="sw-typing-indicator__dot" />
                <span class="sw-typing-indicator__dot" />
                <span class="sw-typing-indicator__dot" />
            </span>
            <span class="sw-typing-indicator__text">${text}</span>
        </div>`;
}
