import { useLayoutEffect, useState } from 'react';

export function useElementRect(elRef: React.RefObject<HTMLElement>) {
  const [rect, setRect] = useState<DOMRect | null>(null);

  useLayoutEffect(() => {
    const el = elRef.current;
    if (!el) return;
    const obs = new ResizeObserver(() => setRect(el.getBoundingClientRect()));
    obs.observe(el);
    setRect(el.getBoundingClientRect());

    return () => obs.disconnect();
  }, []);

  return rect;
}