"use client"
import Link from "next/link";
import { usePathname } from "next/navigation";
import { ComponentProps } from "react";
import clsx from "clsx";


function NavLink(props: ComponentProps<"div"> & { href: string }) {
  return (
    <Link href={props.href}><h1 className={props.className}>{props.children}</h1></Link>
  )
}
export default function Navlinks(props: ComponentProps<"div">) {
  const pathname = usePathname()
  const links = [
    { link: "/story", label: "STORIES" },
    { link: "/publication", label: "PUBLICATIONS" },
    { link: "/submission", label: "SUBMISSIONS" },
  ]
  return (
    <>
      {links.map(e => (<NavLink key={e.link} href={e.link}
        className={clsx("text-3xl font-black my-2",
          {
            "text-primary": pathname === e.link
          }
        )}
      >{e.label}</NavLink >))
      }
    </>
  )
}