import React from 'react';

export default function ReplyPreview({ message, onCancel, onClose }) {
  if (!message) return null;

  return (
    <div className="reply-preview">
      <div className="reply-line" />
      <div className="reply-content">
        <span className="replying-to">Replying to</span>
        <span 
          className="reply-author"
          style={{ color: message.badge === 'foundation' ? '#ff0000' : 
                          message.badge === 'labs' ? '#ffa500' : 
                          message.badge === 'corporation' ? '#0066ff' : '#b9bbbe' }}
        >
          {message.author}
        </span>
        <span className="reply-text">{message.text?.substring(0, 100)}{message.text?.length > 100 ? '...' : ''}</span>
      </div>
      <button className="reply-cancel" onClick={onCancel || onClose}>✕</button>
    </div>
  );
}

export function MessageWithReply({ message, replyTo }) {
  if (!replyTo) return null;

  return (
    <div className="message-reply-context">
      <div className="reply-connector">
        <div className="reply-line-vertical" />
        <div className="reply-line-horizontal" />
      </div>
      <div 
        className="reply-avatar-mini"
        style={{ background: replyTo.avatar?.gradient || '#36393f' }}
      >
        {replyTo.avatar?.initial || replyTo.author?.charAt(0)}
      </div>
      <span 
        className="reply-author-mini"
        style={{ color: replyTo.badge === 'foundation' ? '#ff0000' : 
                        replyTo.badge === 'labs' ? '#ffa500' : 
                        replyTo.badge === 'corporation' ? '#0066ff' : '#b9bbbe' }}
      >
        {replyTo.author}
      </span>
      <span className="reply-text-mini">
        {replyTo.text?.substring(0, 50)}{replyTo.text?.length > 50 ? '...' : ''}
      </span>
    </div>
  );
}
