import { usePathname } from 'next/navigation'
import { NavBar, NavLink, NavWrap } from './styles/navbar';
import StyleSelector from './themeselector';

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

const PageNavbar = () => {
  const path = usePathname();

  return (
    <NavWrap>
      <StyleSelector></StyleSelector>
      <NavBar>
        {navLinks.map((item) => (
          <NavLink active={path == item.href ? true : false} key={item.name} href={item.href}>
            {item.name}
          </NavLink>
        ))}
        <NavLink key="Mastodon_Verify" rel="me" href="https://mastodon.neshweb.net/@neshura">
          Mastodon
        </NavLink>

      </NavBar>
    </NavWrap>
  );
}

export default PageNavbar;