import React, { useState } from 'react';

export default function MessageActions({ message, onReact, onReply, onEdit, onDelete, onPin, onThread }) {
  const [showMore, setShowMore] = useState(false);
  
  const quickReactions = ['👍', '❤️', '😂', '😮', '😢', '😡'];

  return (
    <div className="message-actions">
      <div className="quick-reactions">
        {quickReactions.map((emoji, idx) => (
          <button
            key={idx}
            className="reaction-btn"
            onClick={() => onReact?.(emoji)}
            title={`React with ${emoji}`}
          >
            {emoji}
          </button>
        ))}
        <button className="reaction-btn add-reaction" title="Add Reaction">
          😀+
        </button>
      </div>
      
      <div className="action-buttons">
        <button className="action-btn" onClick={() => onReply?.()} title="Reply">
          ↩️
        </button>
        <button className="action-btn" onClick={() => onThread?.()} title="Create Thread">
          🧵
        </button>
        {message?.isOwn && (
          <button className="action-btn" onClick={() => onEdit?.()} title="Edit">
            ✏️
          </button>
        )}
        <button 
          className="action-btn more-btn" 
          onClick={() => setShowMore(!showMore)}
          title="More"
        >
          ⋯
        </button>
      </div>
      
      {showMore && (
        <div className="more-menu">
          <div className="menu-item" onClick={() => onPin?.()}>
            📌 {message?.isPinned ? 'Unpin' : 'Pin'} Message
          </div>
          <div className="menu-item">
            📋 Copy Text
          </div>
          <div className="menu-item">
            🔗 Copy Link
          </div>
          <div className="menu-item">
            🚩 Mark Unread
          </div>
          <div className="menu-divider"></div>
          <div className="menu-item">
            💬 Reply
          </div>
          <div className="menu-item">
            🧵 Create Thread
          </div>
          <div className="menu-divider"></div>
          <div className="menu-item">
            🚫 Report Message
          </div>
          {message?.isOwn && (
            <>
              <div className="menu-divider"></div>
              <div className="menu-item danger" onClick={() => onDelete?.()}>
                🗑️ Delete Message
              </div>
            </>
          )}
        </div>
      )}
    </div>
  );
}
