cluedo-hp-webapp/frontend/src/components/TopBar.jsx

import React from "react";
import { styles } from "../styles/styles";
import { stylesTokens } from "../styles/theme";

export default function TopBar({
  me,
  userMenuOpen,
  setUserMenuOpen,
  openPwModal,
  openDesignModal,
  openStatsModal,
  doLogout,
  onOpenNewGame,
}) {
  const displayName = me ? ((me.display_name || "").trim() || me.email) : "";

  return (
    <div className="hp-topbar" style={styles.topBar}>
      <div>
        <div style={{ fontWeight: 900, color: stylesTokens.textGold }}>Notizbogen</div>
        <div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>
          {displayName}
        </div>
      </div>

      <div className="hp-topbar-actions" style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "nowrap" }} data-user-menu>
        <div style={{ position: "relative" }}>
          <button
            className="hp-topbar-user"
            onClick={() => setUserMenuOpen((v) => !v)}
            style={styles.userBtn}
            title="User Menü"
          >
            <span style={{ fontSize: 16 }}>👤</span>
            <span>User</span>
            <span style={{ opacity: 0.7 }}>▾</span>
          </button>

          {userMenuOpen && (
            <div style={styles.userDropdown}>
              <div
                style={{
                  padding: "10px 12px",
                  fontSize: 13,
                  opacity: 0.85,
                  color: stylesTokens.textDim,
                  borderBottom: "1px solid rgba(233,216,166,0.12)",
                }}
              >
                {me?.email || ""}
              </div>

              <button
                onClick={() => {
                  setUserMenuOpen(false);
                  openStatsModal?.();
                }}
                style={styles.userDropdownItem}
              >
                Statistik
              </button>

              <div style={styles.userDropdownDivider} />

              <button onClick={openPwModal} style={styles.userDropdownItem}>
                Passwort setzen
              </button>

              <button onClick={openDesignModal} style={styles.userDropdownItem}>
                Design ändern
              </button>

              <div style={styles.userDropdownDivider} />

              <button
                onClick={() => {
                  setUserMenuOpen(false);
                  doLogout();
                }}
                style={{ ...styles.userDropdownItem, color: "#ffb3b3" }}
              >
                Logout
              </button>
            </div>
          )}
        </div>

        <button className="hp-topbar-new" onClick={onOpenNewGame} style={styles.primaryBtn}>
          ✦ New Game
        </button>
      </div>
    </div>
  );
}