import React from "react"
import navStyles from "./nav.module.css"
import { Link } from "gatsby"

let pages = [
  ["home", "/", navStyles.desktopOnly],
  ["zeiten & location", "treff", ""],
  ["events", "events", ""],
  ["über uns", "about", ""],
  ["kontakt", "kontakt", ""],
  ["verein", "verein", ""],
  ["supporte uns", "support", ""],
]

export default ({ path }) => {
  // nav items should always be active in the staticly generated html
  const isSSR = typeof window === "undefined"
  const activeClasses = link =>
    isSSR && path === "/" + link ? " " + navStyles.navItemActive : ""

  return (
    <>
      <header className={navStyles.header}>
        <Link to="/">
          <div className={navStyles.headerContent}>
            {/* todo: fix image links in prod by using the gatsby component */}
            <img alt="CTDO-Logo" width="80rem" src="/logo_ctdo.svg" />
            <span>
              <span className={navStyles.chaos}>Chaostreff</span> Dortmund
            </span>
          </div>
        </Link>
      </header>
      <nav className={navStyles.nav}>
        <div className={navStyles.navContent}>
          {pages.map(([title, link, device]) => (
            <Link
              key={title}
              className={navStyles.navItem + activeClasses(link) + " " + device}
              activeClassName={navStyles.navItemActive}
              activeStyle={{ textDecoration: `solid underline white 0.2em` }}
              to={`/${link}`}
            >
              {title}
            </Link>
          ))}
        </div>
      </nav>
    </>
  )
}