import React from 'react';
import styles from './ChatAssistant.module.css';

const ChatTypingIndicator: React.FC = () => {
  return (
    <div
      className={`${styles.chatMessageRow} ${styles.chatMessageRowAssistant}`}
      aria-live="polite"
      aria-busy="true"
    >
      <span className={styles.chatMessageLabel}>Asistente</span>
      <div
        className={`${styles.chatBubble} ${styles.chatBubbleAssistant} ${styles.chatTypingBubble}`}
        role="status"
        aria-label="El asistente está pensando"
      >
        <span className={styles.chatTypingDots} aria-hidden="true">
          <span />
          <span />
          <span />
        </span>
        <span className={styles.chatTypingText} aria-hidden="true">
          Pensando...
        </span>
      </div>
    </div>
  );
};

export default ChatTypingIndicator;