import React, { useEffect } from 'react';

/**
 * Creates `ResizeObserver` and observes an element from the provided `ref`.
 */
export function useResizeObserver<T extends Element>(
  ref: React.RefObject<T>,
  callback: (entry: ResizeObserverEntry) => void,
  observeOptions?: ResizeObserverOptions,
) {
  useEffect(() => {
    if (!ref.current) {
      return;
    }

    const observer = new ResizeObserver(([elementEntry]) => {
      callback(elementEntry);
    });

    observer.observe(ref.current, observeOptions);

    return () => {
      observer.disconnect();
    };
  }, [callback, observeOptions, ref]);
}