"use client";

import * as React from "react";
import { motion, useScroll } from "motion/react";

export function ScrollProgressBar({ className = "" }: { className?: string }) {
  const { scrollYProgress } = useScroll();
  return (
    <motion.div
      aria-hidden
      className={`fixed left-0 right-0 top-20 h-px z-[60] ${className}`}
    >
      <motion.div
        className="h-full origin-left bg-primary/30"
        style={{ scaleX: scrollYProgress }}
      />
    </motion.div>
  );
}