"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 (
    <div className={props.className}>
      <div className="text-secondary-foreground" >
        {
          links.map(e => (<NavLink key={e.link} href={e.link}
            className={clsx("text-xl font-black my-2 w-full pl-2 antialiased",
              {
                "text-primary-foreground bg-primary": pathname === e.link
              }
            )}
          >{e.label}</NavLink >))
        }
      </ div>
    </div>
  )
}
