'use client';
import { useEffect, useRef, useState } from 'react';

/**
 * Measure an element's width with ResizeObserver. Returns `defaultWidth` during SSR and the first client
 * render so server and client markup match; the chart re-renders once the real width is known.
 */
export function useMeasure<T extends HTMLElement = HTMLDivElement>(defaultWidth = 640) {
  const ref = useRef<T | null>(null);
  const [width, setWidth] = useState(defaultWidth);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const apply = () => {
      const w = Math.round(el.getBoundingClientRect().width);
      if (w > 0) setWidth(w);
    };
    apply();
    if (typeof ResizeObserver === 'undefined') return;
    const ro = new ResizeObserver(() => apply());
    ro.observe(el);
    return () => ro.disconnect();
  }, []);
  return { ref, width } as const;
}