import { useEffect } from "react";

const useScrollLockOnElementClass = (
  elementId: string,
  triggerClass: string
) => {
  useEffect(() => {
    const target = document.getElementById(elementId);
    if (!target) return;

    const updateScroll = () => {
      if (target.classList.contains(triggerClass)) {
        document.body.style.overflow = "hidden";
      } else {
        document.body.style.overflow = "";
      }
    };

    const observer = new MutationObserver(() => {
      updateScroll();
    });

    observer.observe(target, {
      attributes: true,
      attributeFilter: ["class"],
    });

    // Ejecutar al inicio
    updateScroll();

    return () => {
      observer.disconnect();
      document.body.style.overflow = ""; // Reset por si acaso
    };
  }, [elementId, triggerClass]);
};

export default useScrollLockOnElementClass;