/* global React, Icon */
const { useEffect, useState } = React;

function Nav({ onToggleTheme, dark }) {
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <header className={'nav ' + (scrolled ? 'nav-scrolled' : '')}>
      <div className="container-wide nav-inner">
        <a href="#top" className="nav-brand" aria-label="Next Wave home">
          <span className="brand-mark">
            <span className="brand-dot" />
          </span>
          <span className="brand-word">Next Wave</span>
          <span className="brand-tag mono">v2.6</span>
        </a>

        <nav className="nav-links" aria-label="Primary">
          <a href="#demo">Demo</a>
          <a href="#trends">Live trends</a>
          <a href="#faq">FAQ</a>
        </nav>

        <div className="nav-actions">
          <button
            className="icon-btn"
            onClick={onToggleTheme}
            aria-label={dark ? 'Switch to light theme' : 'Switch to dark theme'}
            title={dark ? 'Light' : 'Dark'}
          >
            <Icon name={dark ? 'sun' : 'moon'} size={16} />
          </button>
          <a href="/login" className="btn btn-sm btn-ghost">Log in</a>
          <a href="/login" className="btn btn-sm">Open the app</a>
        </div>
      </div>
    </header>
  );
}

window.Nav = Nav;