"use client";

import { useEffect, useRef, useState } from "react";

/** Largeur rendue d'un conteneur (ResizeObserver). `fallback` sert au rendu serveur et au premier rendu client. */
export function useMeasure<T extends HTMLElement = HTMLDivElement>(fallback = 640) {
  const ref = useRef<T>(null);
  const [width, setWidth] = useState(fallback);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const ro = new ResizeObserver((entries) => {
      const w = Math.round(entries[0]?.contentRect.width ?? 0);
      if (w > 0) setWidth(w);
    });
    ro.observe(el);
    return () => ro.disconnect();
  }, []);
  return { ref, width };
}