"use client";
import { useEffect, useState } from "react";

export function ScrollProgress() {
  const [pct, setPct] = useState(0);

  useEffect(() => {
    function update() {
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      const cur = max > 0 ? (h.scrollTop / max) * 100 : 0;
      setPct(Math.min(100, Math.max(0, cur)));
    }
    update();
    window.addEventListener("scroll", update, { passive: true });
    window.addEventListener("resize", update);
    return () => {
      window.removeEventListener("scroll", update);
      window.removeEventListener("resize", update);
    };
  }, []);

  return (
    <div
      aria-hidden
      className="scroll-progress"
      style={{ ["--scroll" as string]: `${pct}%` }}
    />
  );
}
