"use client";

import NextLink from "next/link";
import { Link, usePathname } from "@/i18n/navigation";

// SiteHeader selbst ist eine async Server-Component und wird als Teil des
// (dynamic, aber pro Layout-Segment persistenten) [locale]-Layouts gerendert
// — bei einer Client-seitigen Navigation zwischen zwei Seiten, die sich
// dasselbe Layout teilen (z. B. /admin -> Startseite, beide unter [locale]),
// rendert Next das Layout NICHT automatisch neu ("partial rendering"), der
// dort einmal berechnete Pfad blieb also auf der zuerst besuchten Seite
// hängen (Fund vom Nutzer, 10.09.2026: aktiver Punkt "stuck" auf Admin).
// usePathname() in einer eigenen Client-Component reagiert dagegen live auf
// jede Navigation, unabhängig vom Layout-Caching.
export function HeaderNavLink({
  href,
  raw = false,
  className = "",
  children,
}: {
  href: string;
  // "raw" = normaler <a>/next/link-Pfad wie "/de/admin" (bewusst fest auf
  // Deutsch, nicht locale-relativ) statt eines next-intl-Links.
  raw?: boolean;
  className?: string;
  children: React.ReactNode;
}) {
  const pathname = usePathname();
  const target = raw ? href.replace(/^\/de/, "") || "/" : href;
  const isActive = target === "/" ? pathname === "/" : pathname === target || pathname.startsWith(`${target}/`);
  const cls = `transition-colors ${isActive ? "text-[var(--rk-accent)]" : "hover:text-[var(--rk-ink)]"} ${className}`;

  if (raw) {
    return (
      <NextLink href={href} className={cls}>
        {children}
      </NextLink>
    );
  }
  return (
    <Link href={href} className={cls}>
      {children}
    </Link>
  );
}