import React from 'react';
import { Message } from '../MessagesTypes';
import styles from '../Messages.module.css';

export interface ActionInfoProps {
  message: Message;
  className?: string;
}

/**
 * Renders action information if present
 */
export const ActionInfo: React.FC<ActionInfoProps> = ({ message, className }) => {
  if (!message.actionName && !message.actionMethod) return null;
  
  return (
    <div className={`${styles.actionInfo} ${className || ''}`}>
      {message.actionName && (
        <span className={styles.actionName}>{message.actionName}</span>
      )}
      {message.actionMethod && (
        <span className={styles.actionMethod}>{message.actionMethod}</span>
      )}
      {(message.roundNumber !== undefined || message.taskNumber !== undefined || message.actionNumber !== undefined) && (
        <span className={styles.actionNumbers}>
          {message.roundNumber !== undefined && `Round ${message.roundNumber}`}
          {message.taskNumber !== undefined && ` • Task ${message.taskNumber}`}
          {message.actionNumber !== undefined && ` • Action ${message.actionNumber}`}
        </span>
      )}
    </div>
  );
};

