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

export function ReadingProgress() {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    function update() {
      if (!ref.current) return;
      const h = document.documentElement;
      const scroll = h.scrollTop;
      const max = h.scrollHeight - h.clientHeight;
      const pct = max > 0 ? (scroll / max) * 100 : 0;
      ref.current.style.width = `${Math.min(100, Math.max(0, pct))}%`;
    }
    update();
    document.addEventListener("scroll", update, { passive: true });
    window.addEventListener("resize", update);
    return () => {
      document.removeEventListener("scroll", update);
      window.removeEventListener("resize", update);
    };
  }, []);

  return <div ref={ref} className="reading-progress" aria-hidden />;
}