'use client';

import { useEffect, useRef } from 'react';

export function useResizeObserver(callback: (entry: ResizeObserverEntry) => void) {
  const ref = useRef<HTMLElement>(null);
  const frameId = useRef<number>(0);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;

    const observer = new ResizeObserver((entries) => {
      // Cancel previous frame to avoid stacking updates
      if (frameId.current) cancelAnimationFrame(frameId.current);
      
      frameId.current = requestAnimationFrame(() => {
        for (const entry of entries) {
          callback(entry);
        }
      });
    });

    observer.observe(element);

    return () => {
      observer.disconnect();
      if (frameId.current) cancelAnimationFrame(frameId.current);
    };
  }, [callback]);

  return ref;
}