/*
 * Runtime Web – Unified Serverless Framework for Full-Stack TypeScript Applications
 * Documentation: https://runtimeweb.com/docs/getting-started
 *
 * @template: ai-chat
 */

/**
 * TypingIndicator Component
 *
 * Displays an animated indicator while AI is generating a response.
 * Features an avatar matching assistant messages and accessible pulsing dots.
 *
 * Features:
 * - Avatar icon matching assistant message styling (✦)
 * - Animated pulsing dots using CSS animations (typing-pulse)
 * - Accessible via aria-live="polite" and aria-label
 * - Positioned where AI response will appear
 * - Performant CSS-only animations (no JavaScript timers)
 * - Respects prefers-reduced-motion preference
 *
 * @requirements 3.1, 3.2, 3.3, 3.4, 3.6
 *
 * @example
 * // Display while AI is generating
 * {isLoading && <TypingIndicator />}
 */

import * as React from 'react';

/**
 * TypingIndicator displays an animated indicator while AI generates a response.
 *
 * Validates:
 * - Requirement 3.1: Display animated indicator while AI is generating
 * - Requirement 3.2: Smooth, non-jarring animation (pulsing dots)
 * - Requirement 3.3: Appear in position where AI response will appear
 * - Requirement 3.4: Performant CSS animations
 * - Requirement 3.6: Accessible text for screen readers (aria-live region)
 *
 * @returns React element representing the typing indicator
 */
export const TypingIndicator: React.FC = () => {
    return (
        <div
            className="typing-indicator"
            role="status"
            aria-live="polite"
            aria-label="AI is thinking"
            data-testid="typing-indicator"
        >
            {/* Avatar matching assistant messages */}
            <div className="typing-indicator__avatar" data-testid="typing-indicator-avatar">
                <span className="typing-indicator__avatar-icon" aria-hidden="true">
                    ✦
                </span>
            </div>

            {/* Bubble containing animated dots */}
            <div className="typing-indicator__bubble">
                <div className="typing-indicator__dots" aria-hidden="true">
                    <span className="typing-indicator__dot" />
                    <span className="typing-indicator__dot" />
                    <span className="typing-indicator__dot" />
                </div>
            </div>
        </div>
    );
};
