"use client";

import { motion, useScroll, useSpring, useTransform } from "framer-motion";

export default function ScrollProgress() {
  const { scrollYProgress } = useScroll();
  const scaleX = useSpring(scrollYProgress, {
    stiffness: 100,
    damping: 30,
    restDelta: 0.001,
  });

  const opacity = useTransform(scrollYProgress, [0, 0.02, 0.98, 1], [0, 1, 1, 0]);

  return (
    <>
      {/* Top progress bar */}
      <motion.div
        className="fixed left-0 right-0 top-0 z-[9995] h-[2px] origin-left bg-[var(--slash)]"
        style={{ scaleX, opacity }}
      />

      {/* Side scroll indicator */}
      <motion.div
        className="fixed right-6 top-1/2 z-[9994] hidden -translate-y-1/2 lg:block"
        style={{ opacity }}
      >
        <div className="relative h-[120px] w-px bg-[rgba(255,255,255,0.08)]">
          <motion.div
            className="absolute left-0 top-0 w-full origin-top bg-[var(--slash)]"
            style={{
              scaleY: scrollYProgress,
              height: "100%",
            }}
          />
          <motion.div
            className="absolute left-1/2 -translate-x-1/2 rounded-full bg-[var(--slash)]"
            style={{
              width: 6,
              height: 6,
              top: useTransform(scrollYProgress, [0, 1], ["0%", "100%"]),
              boxShadow: "0 0 10px rgba(204, 255, 0, 0.5)",
            }}
          />
        </div>
      </motion.div>
    </>
  );
}