import { For, createSignal, onMount } from "solid-js";

interface Page {
  path: string,
  name: string,
}

const pages: Page[] = [
  { path: "/", name: "about" },
  { path: "/writing", name: "writing" },
  { path: "/music", name: "music" },
]

const inactiveClasses = "text-xl text-fg_light transition-all duration-300 hover:scale-[110%] hover:text-foreground";
const activeClasses = "font-bold !text-foreground";


const Nav = () => {
  const [currentPage, setCurrentPage] = createSignal<string>();

  onMount(() => {
    setCurrentPage(window.location.pathname);
  });


  return (
    <nav class="pt-4 w-full flex flex-row justify-around">
      <For each={pages}>{
        (page, _) =>
          <a class={
            (page.path == currentPage() || page.path + "/" == currentPage()) ?
              inactiveClasses + " " + activeClasses :
              inactiveClasses
          }
            href={page.path}
            onClick={() => {
              setCurrentPage(page.path);
            }}
          >
            {page.name}
          </a>
      }</For>
    </nav>
  );
};

export default Nav;
