"use client";

import { useEffect, useRef } from "react";

export default function ProgressBar() {
  const barRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const onScroll = () => {
      if (!barRef.current) return;
      const pct =
        (document.documentElement.scrollTop /
          (document.documentElement.scrollHeight - window.innerHeight)) *
        100;
      barRef.current.style.width = pct + "%";
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <div className="progress-container">
      <div className="progress-bar" ref={barRef} />
    </div>
  );
}