/* eslint-disable */
// Top sticky nav bar — wordmark, dark-mode toggle, logout

const TopNav = ({ onToggleSidebar, dark, onToggleDark, onLogout }) => (
  <nav className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 sticky top-0 z-40">
    <div className="px-4 py-3 md:px-6 md:py-4 flex justify-between items-center">
      <div className="flex items-center gap-4">
        <button
          onClick={onToggleSidebar}
          className="md:hidden text-gray-700 dark:text-gray-300"
          aria-label="Open menu"
        >
          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"></path>
          </svg>
        </button>
        <h1 className="text-2xl font-bold text-gray-900 dark:text-white tracking-tight">The Jagdev Hub</h1>
      </div>

      <div className="flex items-center gap-3">
        <button
          onClick={onToggleDark}
          className="text-2xl p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
          aria-label="Toggle dark mode"
        >
          {dark ? "☀️" : "🌙"}
        </button>
        <BtnSmall onClick={onLogout}>Logout</BtnSmall>
      </div>
    </div>
  </nav>
);

window.TopNav = TopNav;