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

export interface MessageMetadataProps {
  message: Message;
  showProgress?: boolean;
  className?: string;
}

/**
 * Renders message metadata (role, status, timestamp)
 */
export const MessageMetadata: React.FC<MessageMetadataProps> = ({ 
  message, 
  showProgress = true,
  className 
}) => {
  return (
    <div className={`${styles.messageMetadata} ${className || ''}`}>
      {message.role && (
        <span className={styles.roleBadge} data-role={message.role.toLowerCase()}>
          {message.role}
        </span>
      )}
      {message.status && (
        <span className={`${styles.statusBadge} ${getStatusClass(styles, message.status, message.success)}`}>
          {message.status}
        </span>
      )}
      {message.publishedAt && (
        <span className={styles.timestamp}>{formatTimestamp(message.publishedAt)}</span>
      )}
      {showProgress && message.actionProgress && (
        <span className={styles.progress}>{message.actionProgress}</span>
      )}
      {showProgress && message.taskProgress && (
        <span className={styles.progress}>{message.taskProgress}</span>
      )}
    </div>
  );
};

