'use client';

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

/**
 * Tracks a container element's width with a plain resize listener, instead
 * of relying on Recharts' ResponsiveContainer (which uses a ResizeObserver
 * internally and can silently never fire in some browser/extension setups
 * — when that happens, ResponsiveContainer renders an empty div forever,
 * with no error and no fallback). This sidesteps that failure mode
 * entirely: charts get an explicit pixel width from plain DOM measurement,
 * which always works.
 */
export function useContainerWidth<T extends HTMLElement>(fallback = 600) {
  const ref = useRef<T>(null);
  const [width, setWidth] = useState(fallback);

  useEffect(() => {
    function measure() {
      if (ref.current) {
        setWidth(ref.current.clientWidth || fallback);
      }
    }

    measure();
    window.addEventListener('resize', measure);
    return () => window.removeEventListener('resize', measure);
  }, [fallback]);

  return { ref, width };
}