"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";
import { ArrowUpNarrowWide, BookOpen, BookOpenText } from "lucide-react";


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", icon: <BookOpenText /> },
    { link: "/publication", label: "PUBLICATIONS", icon: <BookOpen /> },
    { link: "/submission", label: "SUBMISSIONS", icon: <ArrowUpNarrowWide /> },
  ]
  return (
    <div className={props.className}>
      <div className="text-secondary-foreground flex flex-row md:flex-col" >
        {
          links.map(e => (<NavLink key={e.link} href={e.link}
            className={twMerge(clsx("text-xl drop-shadow  font-black my-2 w-full mr-2 p-2 pl-6 antialiased text-secondary-foreground bg-secondary rounded-3xl md:rounded-l-3xl ",
              {
                "text-primary-foreground bg-primary": pathname.includes(e.link)
              }
            ))}
          >
            <p className="drop-shadow-sm hidden md:block">{e.label}</p>
            <span className="block md:hidden">{e.icon}</span>
          </NavLink >))
        }
      </ div>
    </div>
  )
}