"use client";

import { motion, useReducedMotion, useScroll, useSpring } from "framer-motion";

/**
 * Reading progress, rendered as the navbar's bottom hairline.
 *
 * Deliberately not a bar of its own: the header already draws a 1px border
 * once the page is scrolled, so the progress line replaces something that was
 * there rather than adding furniture to the top of every page. At the top of
 * the document it has zero width and is invisible.
 */
export function ScrollProgress() {
  const reduced = useReducedMotion();
  const { scrollYProgress } = useScroll();

  // The spring smooths the jitter of a trackpad; with reduced motion the raw
  // value is used, which still tracks the scroll exactly — just without easing.
  const smoothed = useSpring(scrollYProgress, {
    stiffness: 120,
    damping: 30,
    restDelta: 0.001,
  });

  return (
    <motion.div
      aria-hidden
      style={{ scaleX: reduced ? scrollYProgress : smoothed }}
      className="absolute inset-x-0 bottom-0 h-px origin-left bg-accent/70"
    />
  );
}