"use client";

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

/**
 * 页面顶部阅读进度条。
 *
 * 使用 motion 的 `useScroll` + `useSpring`：滚动位置映射为宽度百分比，
 * 经弹簧平滑后呈现，避免直接跟随时产生的抖动。
 */
export function ReadingProgress() {
	const shouldReduceMotion = useReducedMotion();
	const { scrollYProgress } = useScroll();
	const scaleX = useSpring(scrollYProgress, {
		stiffness: 220,
		damping: 40,
		restDelta: 0.001,
	});

	if (shouldReduceMotion) {
		return null;
	}

	return (
		<motion.div
			aria-hidden="true"
			style={{ scaleX }}
			className="fixed inset-x-0 top-0 z-50 h-[2px] origin-left bg-brand-green"
		/>
	);
}