"use client";

import { motion, useScroll, useSpring, useReducedMotion } from "motion/react";

/**
 * Thin electric-blue bar pinned to the bottom of the sticky header that fills
 * as the page scrolls. Uses a spring for buttery motion. No-ops under
 * prefers-reduced-motion.
 */
export function HeaderScrollProgress() {
  const shouldReduceMotion = useReducedMotion();
  const { scrollYProgress } = useScroll();
  const scaleX = useSpring(scrollYProgress, {
    stiffness: 140,
    damping: 24,
    mass: 0.4,
  });

  if (shouldReduceMotion) return null;

  return (
    <motion.div
      aria-hidden
      style={{ scaleX, transformOrigin: "0% 50%" }}
      className="absolute inset-x-0 bottom-0 h-[2px] origin-left bg-[var(--color-blue)]"
    />
  );
}
