// useHoverIntent.js
import { useRef } from "react";

export function useHoverIntent(onIntent, delay = 150) {
  const timer = useRef(null);

  const onMouseEnter = () => {
    timer.current = setTimeout(() => {
      onIntent();
    }, delay);
  };

  const onMouseLeave = () => {
    clearTimeout(timer.current);
  };

  return {
    onMouseEnter,
    onMouseLeave,
  };
}

// usePrefetchOnHover.js
import { useHoverIntent } from "./useHoverIntent";

export function usePrefetchOnHover(url, prefetchFn) {
  return useHoverIntent(() => {
    prefetchFn(url);
  });
}

// prefetch.js
export async function prefetch(url) {
  try {
    await fetch(url, { method: "HEAD" });
  } catch (err) {
    console.error("Prefetch failed:", err);
  }
}

// SmartLink.js
import { usePrefetchOnHover } from "./usePrefetchOnHover";
import { prefetch } from "./prefetch";

function SmartLink({ href, children }) {
  const hoverHandlers = usePrefetchOnHover(href, prefetch);

  return (
    <a href={href} {...hoverHandlers}>
      {children}
    </a>
  );
}

export default SmartLink;

// App.js
import SmartLink from "./SmartLink";

function App() {
  return (
    <nav>
      <SmartLink href="/about">About Us</SmartLink>
      <SmartLink href="/services">Services</SmartLink>
      <SmartLink href="/contact">Contact</SmartLink>
    </nav>
  );
}

export default App;