import { For, onMount, type Component } from "solid-js";
import { useStore } from "@nanostores/solid";
import { $currentPage } from "@/scripts/currentPage"
import PageLink from "./PageLink";

type Page = {
  path: string,
  name: string,
};

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

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


const Nav: Component = () => {
  const currentPage = useStore($currentPage);

  onMount(() => {
    $currentPage.set(window.location.pathname);
  });

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

export default Nav;
