Prefetching data on hover for instant navigation

                  import { Link } from 'react-router-dom'
import { useQueryClient } from '@tanstack/react-query'
import api from '@/services/api'
import { PostId } from '@/types'

interface PostLinkProps {
  postId: PostId
  children: React.ReactNode
}

export function PostLink({ postId, children }: PostLinkProps) {
  const queryClient = useQueryClient()
  let prefetchTimeout: NodeJS.Timeout

  const prefetchPost = () => {
    prefetchTimeout = setTimeout(() => {
      queryClient.prefetchQuery({
        queryKey: ['posts', postId],
        queryFn: () => api.get(`/posts/${postId}`).then((res) => res.data),
        staleTime: 5 * 60 * 1000, // Consider fresh for 5 minutes
      })
    }, 100) // Small delay to avoid prefetching during quick mouseovers
  }

  const cancelPrefetch = () => {
    if (prefetchTimeout) {
      clearTimeout(prefetchTimeout)
    }
  }

  return (
    <Link
      to={`/posts/${postId}`}
      onMouseEnter={prefetchPost}
      onMouseLeave={cancelPrefetch}
      className="text-blue-600 hover:underline"
    >
      {children}
    </Link>
  )
}