/* ========================================
   Message Component — padhle (Refined Workspace)
   ======================================== */

import "./Message.css";

const Message = ({ message }) => {
  const { role, text } = message;
  const isUser = role === "user";

  return (
    <div className={`message ${isUser ? "message--user" : "message--assistant"}`}>
      {!isUser && (
        <div className="message__avatar">
          <div className="message__avatar-icon">
            <span className="material-symbols-outlined" style={{ fontWeight: 700 }}>school</span>
          </div>
        </div>
      )}
      <div className="message__bubble">
        <div className="message__text">{text}</div>
      </div>

      {/* Action buttons for assistant messages */}
      {!isUser && (
        <div className="message__actions">
          <button className="message__action" aria-label="Helpful" title="Helpful">
            <span className="material-symbols-outlined">thumb_up</span>
          </button>
          <button className="message__action" aria-label="Save note" title="Save Note">
            <span className="material-symbols-outlined">bookmark_border</span>
          </button>
          <button className="message__action message__action--primary" aria-label="Explain deeper" title="Explain Deeper">
            <span className="material-symbols-outlined" style={{ fontWeight: 700 }}>menu_book</span>
          </button>
        </div>
      )}
    </div>
  );
};

export default Message;