'use client';

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

/**
 * A brand-coloured rule across the very top of the viewport that fills as the
 * page scrolls. Sits above the navbar (z-50) so it reads as a property of the
 * window rather than of the header.
 *
 * scaleX on a fixed element is a compositor-only transform, so this costs
 * nothing per frame — no layout, no paint, and no scroll listener of our own.
 */
export function ScrollProgress() {
  const { scrollYProgress } = useScroll();
  const reduce = useReducedMotion();

  // The spring is what stops the bar twitching on trackpad and momentum
  // scrolling. Someone who has asked for reduced motion gets the raw value
  // instead: still accurate, just not eased.
  const smooth = useSpring(scrollYProgress, {
    stiffness: 140,
    damping: 30,
    restDelta: 0.001,
  });

  return (
    <motion.div
      aria-hidden
      style={{ scaleX: reduce ? scrollYProgress : smooth }}
      className="fixed top-0 inset-x-0 z-[60] h-[3px] origin-left
                 bg-gradient-to-r from-primary via-primary to-primary/40"
    />
  );
}