import React from 'react';
import { ChatMenuOption } from '../../types/chatAssistant';
import styles from './ChatAssistant.module.css';

interface ChatMessageMenuProps {
  options: ChatMenuOption[];
  disabled?: boolean;
  onSelect: (value: string) => void;
}

const ChatMessageMenu: React.FC<ChatMessageMenuProps> = ({ options, disabled = false, onSelect }) => {
  if (options.length === 0) {
    return null;
  }

  return (
    <div className={styles.chatMenu} role="group" aria-label="Opciones disponibles">
      <p className={styles.chatMenuHint}>Elige una opción para continuar</p>
      <div className={styles.chatMenuOptions}>
        {options.map((option, index) => (
          <button
            key={option.id}
            id={`chat-menu-option-${option.id}`}
            type="button"
            className={styles.chatMenuButton}
            disabled={disabled}
            onClick={() => onSelect(option.value)}
          >
            <span className={styles.chatMenuButtonIndex} aria-hidden="true">
              {index + 1}
            </span>
            <span className={styles.chatMenuButtonLabel}>{option.label}</span>
            <i className={`ri-arrow-right-s-line ${styles.chatMenuButtonIcon}`} aria-hidden="true" />
          </button>
        ))}
      </div>
    </div>
  );
};

export default ChatMessageMenu;