/* global React */
const { useState: useHeaderState } = React;

function Header({ active = "home", onNav }) {
  const [open, setOpen] = useHeaderState(false);
  const items = [
    ["home", "Accueil"],
    ["services", "Services"],
    ["realisations", "Réalisations"],
    ["about", "À propos"],
    ["contact", "Contact"],
  ];
  const go = (k) => { setOpen(false); onNav(k); };
  return (
    <>
      <header className="fn-header">
        <a className="fn-brand" href="#" onClick={(e) => { e.preventDefault(); go("home"); }}>
          <img src="assets/fennec-logo-master.jpg" alt="FENNEC"/>
        </a>
        <nav className="fn-nav">
          {items.map(([k, label]) => (
            <a key={k} href={"#" + k}
               className={"fn-nav-link" + (active === k ? " is-active" : "")}
               onClick={(e) => { e.preventDefault(); go(k); }}>
              {label}
            </a>
          ))}
        </nav>
        <a className="fn-cta-mini" href="#contact" onClick={(e) => { e.preventDefault(); go("contact"); }}>
          Prendre rendez-vous
          <img src="assets/arrow-fennec.png" alt="" className="fn-arrow"/>
        </a>
        <button className="fn-burger" aria-label="Menu" onClick={() => setOpen(true)}>
          <span/><span/><span/>
        </button>
      </header>

      <aside className={"fn-drawer" + (open ? " is-open" : "")}>
        <button className="fn-drawer-close" onClick={() => setOpen(false)}>Fermer ✕</button>
        {items.map(([k, label]) => (
          <a key={k} href={"#" + k}
             className={active === k ? "is-active" : ""}
             onClick={(e) => { e.preventDefault(); go(k); }}>
            {label}
          </a>
        ))}
        <a className="fn-drawer-cta" href="#contact" onClick={(e) => { e.preventDefault(); go("contact"); }}>
          Prendre rendez-vous →
        </a>
      </aside>
    </>
  );
}

window.Header = Header;