import { usePathname, useSearchParams } from "next/navigation"
import { useMemo } from "react"

export function useUrlWithSearchParam(
  searchParam: { key: string; value: string },
  path?: string | null
) {
  const { key, value } = searchParam
  const pathname = path ?? usePathname()
  const searchParams = useSearchParams()

  return useMemo(() => {
    const newUrl = new URL(pathname, window.location.origin)

    // Preserve existing search params
    searchParams.forEach((val, key) => {
      newUrl.searchParams.set(key, val)
    })

    // Set or override the specific search param
    newUrl.searchParams.set(key, value)

    return newUrl
  }, [pathname, searchParams, key, value])
}