import { NextLink } from "@/components/next-link";
import { cn } from "@/lib/utils";
import { usePathname } from "next/navigation";
import type { ReactNode } from "react";

export type NavItem = {
  label: ReactNode;
  href: string;
  disabled?: boolean;
};

export function StandardNav({
  className,
  items,
}: {
  className?: string;
  items: NavItem[];
}) {
  const pathname = usePathname();
  return (
    <nav className={className}>
      <ul className="w-full space-y-2">
        {items.map(({ label, href, disabled }) => {
          const active = isActive(pathname, href);
          return (
            <li key={href}>
              <NextLink
                href={href}
                className={cn(
                  "w-full justify-start",
                  active && "font-semibold"
                )}
                variant={active ? "secondary" : "ghost"}
                disabled={disabled}
              >
                {label}
              </NextLink>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}

function isActive(pathname: string, href: string) {
  return pathname === href.split("?")[0].split("#")[0];
}