import { useEffect, useState } from "react";
import type { MutableRefObject } from "react";

export const useIsFocused = <T extends HTMLElement>(focusRef: MutableRefObject<T | null>) => {
  const [isFocused, setIsFocused] = useState(false);

  useEffect(() => {
    const handleFocus = () => setIsFocused(true);
    const handleBlur = () => setIsFocused(false);

    const element = focusRef.current;
    if (element) {
      element.addEventListener("focus", handleFocus);
      element.addEventListener("blur", handleBlur);
    }

    return () => {
      if (element) {
        element.removeEventListener("focus", handleFocus);
        element.removeEventListener("blur", handleBlur);
      }
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [focusRef, focusRef.current]);

  return { isFocused };
};