"use client";

import { useLayoutEffect } from "react";

type Mode = "scroll" | "offset";

export function useHeightVar(
  ref: React.RefObject<HTMLElement | null>,
  cssVarName: string,
  mode: Mode = "scroll",
  trigger?: unknown,
) {
  useLayoutEffect(() => {
    const el = ref.current;
    if (!el) return;

    const measure = () => {
      const h = mode === "scroll" ? el.scrollHeight : el.offsetHeight;
      el.style.setProperty(cssVarName, `${h}px`);
    };

    measure();

    const ro = new ResizeObserver(measure);
    ro.observe(el);

    return () => ro.disconnect();
  }, [ref, cssVarName, mode, trigger]);
}