/* global React */
// Phase C-2.1-fix: 좁은 화면(≤1024)에서 햄버거로 사이드바 토글.
// StudentSidebar 와는 window CustomEvent('s-sidebar:toggle') 로 연동.
function StudentTopBar({ studentName }) {
  const handleHamburger = () => {
    try { window.dispatchEvent(new CustomEvent('s-sidebar:toggle')); } catch (_) {}
  };
  return (
    <header className="s-tb">
      <button
        type="button"
        className="s-tb-hamburger"
        aria-label="메뉴 열기"
        onClick={handleHamburger}
      >
        <i data-lucide="menu"></i>
      </button>
      <a href="student-home.html" className="s-tb-brand" aria-label="챌린지200 학생 포털 홈">
        <img src="../assets/logo2-full.png" alt="챌린지200" className="s-tb-logo-img" />
        <span className="s-tb-sub">학생 포털</span>
      </a>
      <div className="s-tb-right">
        <span className="s-tb-greeting">{studentName}님</span>
        <button
          className="s-tb-icon-btn"
          aria-label="알림"
          onClick={() => window.showToast && window.showToast('알림 기능은 Phase 3에서 구현됩니다')}
        >
          <i data-lucide="bell"></i>
          <span className="s-tb-dot"></span>
        </button>
        <button
          className="s-tb-logout-text"
          onClick={() => window.showToast && window.showToast('로그아웃은 Phase G (공식 홈페이지)에서 구현됩니다')}
        >
          로그아웃
        </button>
      </div>
    </header>
  );
}
window.StudentTopBar = StudentTopBar;