"use client";

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

/**
 * Feine Honiglinie am oberen Rand, die sich beim Lesen eines Artikels
 * fuellt — zeigt, wie weit man ist, ohne vom Text abzulenken. Rein
 * dekorativ fuer Sehende; die Seite bleibt ohne sie vollstaendig lesbar.
 */
export function ReadingProgress() {
  const { scrollYProgress } = useScroll();
  const scaleX = useSpring(scrollYProgress, { stiffness: 140, damping: 26, mass: 0.4 });

  return (
    <motion.div
      aria-hidden="true"
      style={{ scaleX }}
      className="fixed inset-x-0 top-0 z-[55] h-[3px] origin-left bg-gradient-to-r from-honey-dark to-honey"
    />
  );
}