import { useEffect, useState } from 'react';

export type ElementSize = { width: number; height: number };

export function useResizeObserver<T extends HTMLElement>(
  element: T | null,
): ElementSize {
  const [size, setSize] = useState<ElementSize>({ width: 0, height: 0 });

  useEffect(() => {
    if (!element) return;
    const observer = new ResizeObserver(([entry]) => {
      const width = entry.contentRect.width;
      const height = entry.contentRect.height;
      setSize({ width, height });
    });
    observer.observe(element);
    return () => observer.disconnect();
  }, [element]);

  return size;
}