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

/** Breite des Behälters für die Diagramme; ohne ResizeObserver (Tests) bleibt es beim Standard. */
export function useBreite(standard = 640) {
  const ref = useRef<HTMLDivElement>(null)
  const [breite, setBreite] = useState(standard)
  useEffect(() => {
    const el = ref.current
    if (!el || typeof ResizeObserver === "undefined") return
    const beobachter = new ResizeObserver(([e]) => setBreite(Math.max(240, Math.round(e.contentRect.width))))
    beobachter.observe(el)
    return () => beobachter.disconnect()
  }, [])
  return [ref, breite] as const
}