import { useEffect } from "react";
import { gsap } from "gsap";
import { ScrollSmoother } from "@/plugins";

gsap.registerPlugin(ScrollSmoother);

const ScrollSmootherComponents = () => {
  useEffect(() => {
    if (typeof window !== "undefined") {
      // Detect Safari Browser
      const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
      const device_width = window.innerWidth;

      // Initialize GSAP ScrollSmoother
      let tHero = gsap.context(() => {
        ScrollSmoother.create({
          smooth: isSafari ? 0.8 : 1,
          effects: device_width < 1025 ? false : true,
          smoothTouch: true,
          normalizeScroll: true,
          ignoreMobileResize: true,
        });
      });

      // Cleanup on component unmount
      return () => tHero.revert();
    }
  }, []);

  return <div></div>;
};

export default ScrollSmootherComponents;