"use client";

import { useEffect, useRef } from "react";

export default function ScrollProgress() {
  const progressRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const updateProgress = () => {
      const scrollTop = window.scrollY;

      const totalScrollableHeight =
        document.documentElement.scrollHeight - window.innerHeight;

      const progress =
        totalScrollableHeight > 0
          ? scrollTop / totalScrollableHeight
          : 0;

      if (progressRef.current) {
        progressRef.current.style.transform = `scaleX(${progress})`;
      }
    };

    updateProgress();

    window.addEventListener("scroll", updateProgress, {
      passive: true,
    });

    window.addEventListener("resize", updateProgress);

    return () => {
      window.removeEventListener("scroll", updateProgress);
      window.removeEventListener("resize", updateProgress);
    };
  }, []);

  return (
    <div
      className="
        absolute
        left-0
        top-0
        z-[1000]
        h-[3px]
        w-full
        overflow-hidden
        bg-[#fbf8ff]/95
      "
    >
      <div
        ref={progressRef}
        className="
          h-full
          w-full
          origin-left
          bg-gradient-to-r
          from-[#9d28e8]
          via-[#ed008c]
          to-[#ff6a23]
          will-change-transform
        "
        style={{
          transform: "scaleX(0)",
        }}
      />
    </div>
  );
}