export default function ChatHeader({ title, onBack, avatar, statusLabel, statusConnected }) {
  return (
      <div className="chat-header">
        <button className="chat-back-btn" onClick={onBack}>
          ←
        </button>
        {avatar !== undefined && (
            <div className="chat-header-avatar">{avatar}</div>
        )}
        <div className="chat-header-title">{title}</div>
        {statusLabel !== undefined ? (
            <div className={`chat-status${statusConnected ? " connected" : ""}`}>
              {statusLabel}
            </div>
        ) : (
            <div />
        )}
      </div>
  );
}