/* global React, LogoMark, LiveClock */

function Nav({ route, navigate }) {
  const links = [
    { id: "home", label: "Home" },
    { id: "about", label: "About" },
    { id: "case", label: "Work" },
    { id: "resume", label: "Resume" },
  ];
  const isActive = (id) => {
    if (id === "case") return route.startsWith("case");
    return route === id;
  };
  return (
    <nav className="site-nav">
      <div className="nav-inner">
        <a className="nav-brand" onClick={(e) => { e.preventDefault(); navigate("home"); }} href="#home">
          <LogoMark size={14} />
          <span>Jaeden Thai</span>
        </a>
        <ul className="nav-links">
          {links.map(l => (
            <li key={l.id}>
              <a
                className={isActive(l.id) ? "active" : ""}
                href={"#" + l.id}
                onClick={(e) => { e.preventDefault(); navigate(l.id === "case" ? "case-01" : l.id); }}
              >{l.label}</a>
            </li>
          ))}
        </ul>
        <div className="nav-end">
          <LiveClock />
          <a className="nav-cta" href="mailto:hello@jaedenthai.studio" onClick={(e) => e.stopPropagation()}>Say hello</a>
        </div>
      </div>
    </nav>
  );
}

window.Nav = Nav;