import styles from '/styles/Home.module.css'
import Link from 'next/link'
import { useRouter } from 'next/router'

const navLinks = [
  { name: "Home", href: "/" },
  { name: "About", href: "/about" },
  { name: "Games", href: "/games" },
  { name: "Services", href: "/services" }
]

const Navbar = () => {
  const router = useRouter();

  return (
    <nav className={styles.navbar}>
      {navLinks.map((item, index) => (
        <Link key={item.name} href={item.href}>
          <a className={router.pathname == item.href ? styles.navelem_active : styles.navelem}>{item.name}</a>
        </Link>
      ))}
      <Link key="Mastodon_Verify" href="https://mastodon.neshura-server.net/@neshura">
        <a className={styles.navelem} rel="me" href="https://mastodon.neshura-server.net/@neshura">Mastodon</a>
      </Link>
      
    </nav>
  );
}

export default Navbar;