'use client';

import Link from 'next/link';
import { useLinkStatus } from 'next/link';
import type { ComponentProps, ReactNode } from 'react';

type InsightNavLinkProps = Omit<ComponentProps<typeof Link>, 'children'> & { children: ReactNode };

function LinkPendingIndicator({ children }: { children: ReactNode }) {
  const { pending } = useLinkStatus();

  return (
    <span className={`insight-nav-link-inner${pending ? ' insight-nav-pending' : ''}`} aria-busy={pending}>
      {pending && (
        <span className="insight-nav-pending-overlay d-flex align-items-center justify-content-center" aria-hidden>
          <span className="spinner-border spinner-border-sm text-warning" role="status">
            <span className="visually-hidden">Loading…</span>
          </span>
        </span>
      )}
      {children}
    </span>
  );
}

/** Insight card links with immediate pending feedback during App Router navigation. */
export default function InsightNavLink({ children, ...props }: InsightNavLinkProps) {
  return (
    <Link {...props}>
      <LinkPendingIndicator>{children}</LinkPendingIndicator>
    </Link>
  );
}