"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { FOCUS_RING_CLASSES } from "@/components/ui/styles";
import { cn } from "@/lib/utils";

export const NAV_LINKS = [
  { href: "/", label: "Home" },
  { href: "/events", label: "Event" },
];

export function isNavLinkActive(pathname: string, href: string) {
  if (href === "/") return pathname === "/";
  return pathname === href || pathname.startsWith(`${href}/`);
}

export function NavLinks({ className = "" }: { className?: string }) {
  const pathname = usePathname();

  return (
    <>
      {NAV_LINKS.map((link) => {
        const active = isNavLinkActive(pathname, link.href);
        return (
          <Link
            key={link.href}
            href={link.href}
            aria-current={active ? "page" : undefined}
            className={cn(
              "rounded transition-colors",
              FOCUS_RING_CLASSES,
              active ? "text-kolabora-primary" : "hover:text-kolabora-primary",
              className,
            )}
          >
            {link.label}
          </Link>
        );
      })}
    </>
  );
}