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

function TopNav({ onCTA }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 32);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <div className={`topnav-wrap ${scrolled ? "topnav-wrap--scrolled" : ""}`}>
      <nav className="topnav">
        <a className="topnav-logo" href="#top">
          <div className="topnav-mark">D</div>
          <span>Dhany Indraswara</span>
        </a>
        <ul className="topnav-links">
          <li><a href="#about">About</a></li>
          <li><a href="#audience">Audience</a></li>
          <li><a href="#reach">Reach</a></li>
          <li><a href="#pillars">Pillars</a></li>
          <li><a href="#collab">Collab</a></li>
        </ul>
        <div className="topnav-cta">
          <span className="pill pill--lime pill--sm">
            <span className="pill-dot" /> Open
          </span>
          <Button variant="primary" onClick={onCTA} icon={<Icon name="message-circle" size={14} />}>
            Chat on WhatsApp
          </Button>
        </div>
      </nav>
    </div>
  );
}

window.TopNav = TopNav;