"use client"
import {
  MutableRefObject,
  RefObject,
  useCallback,
  useRef,
  useState,
} from "react"

export const useCallbackRef = <T>(
  customRef?: MutableRefObject<T | null>,
  cb?: (node: T) => void,
): [RefObject<T | null>, (node: T) => void] => {
  const ref = useRef<T | null>(null)
  const refToUse = customRef ?? ref

  const [_initialize, setInitialize] = useState(false)
  const setRef = useCallback(
    (node: T) => {
      if (refToUse.current === node) {
        return
      }

      refToUse.current = node
      setInitialize(true)
      cb?.(node)
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [refToUse],
  )

  return [refToUse, setRef]
}