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


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={twMerge(clsx("text-xl drop-shadow  font-black my-2 w-full pl-2 antialiased text-secondary-foreground bg-secondary",
              {
                "text-primary-foreground bg-primary": pathname.includes(e.link)
              }
            ))}
          ><p className="drop-shadow-sm">{e.label}</p></NavLink >))
        }
      </ div>
    </div>
  )
}