import { useState, useEffect } from "react";

// Custom hook to track the width of an element
const useElementWidth = (ref: React.RefObject<HTMLElement>) => {
  const [width, setWidth] = useState<number>(0);

  useEffect(() => {
    // If there's no element to observe, just return early
    if (!ref.current) return;

    // ResizeObserver callback function
    const resizeObserver = new ResizeObserver(() => {
      if (ref.current) {
        setWidth(ref.current.clientWidth); // Update width state
      }
    });

    // Start observing the element's size changes
    resizeObserver.observe(ref.current);

    // Clean up observer on component unmount
    return () => resizeObserver.disconnect();
  }, [ref, ref.current?.clientWidth]);

  return width; // Return the current width
};

export default useElementWidth;