"use client";

import Link from "next/link";
import { type ComponentProps, useState } from "react";

/**
 * Link interno que só pré-carrega a rota quando a pessoa chega nele (mouse, teclado ou toque).
 * O padrão do Link pré-carrega todo link visível ao abrir a página, e o cabeçalho e a faixa de clientes
 * somavam 15 pedidos disputando a rede na abertura. Com `prefetch={false}` o App Router não pré-carrega nem no hover.
 * Padrão da documentação do Next: node_modules/next/dist/docs/01-app/02-guides/prefetching.md.
 */
export default function HoverPrefetchLink({
  onMouseEnter,
  onFocus,
  onTouchStart,
  ...props
}: Omit<ComponentProps<typeof Link>, "prefetch">) {
  const [active, setActive] = useState(false);

  return (
    <Link
      {...props}
      prefetch={active ? null : false}
      onMouseEnter={(event) => {
        setActive(true);
        onMouseEnter?.(event);
      }}
      onFocus={(event) => {
        setActive(true);
        onFocus?.(event);
      }}
      onTouchStart={(event) => {
        setActive(true);
        onTouchStart?.(event);
      }}
    />
  );
}