import React from "react";

export default function Message(props) {
  if (props.type === "system") {
    return (
      <div className={`message-system ${props.className} bg-[#0f0f0f] border-l-4 pl-4 pr-4 py-3 mb-4 text-sm`}>
        <div className={`system-label ${props.className} text-xs uppercase tracking-wider font-bold mb-1`}>[{props.label}] System Announcement</div>
        <div>{props.text}</div>
      </div>
    );
  }
  return (
    <div className="message flex gap-4 mb-5 p-3 rounded transition hover:bg-[#0f0f0f]">
      <div className={`message-avatar w-10 h-10 rounded-full flex items-center justify-center font-bold text-base flex-shrink-0 bg-gradient-to-tr ${props.avatarBg}`}>{props.avatar}</div>
      <div className="message-content flex-1">
        <div className="message-header flex items-baseline gap-3 mb-1">
          <span className="message-author font-bold">{props.author}</span>
          {props.badge && (
            <span className={`message-badge ${props.className} text-xs px-2 py-1 rounded uppercase tracking-wider font-bold`}>{props.badge}</span>
          )}
          <span className="message-time text-xs text-gray-500">{props.time}</span>
        </div>
        <div className="message-text leading-relaxed text-gray-300">{props.text}</div>
      </div>
    </div>
  );
}