"use client"

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

export default function Page() {

    const ref = useRef(null);
    const { scrollYProgress } = useScroll({ container: ref });

    return (
        <div className="px-10 py-10 md:py-30 bg-black cursor-pointer">
            <div className="space-y-10 max-w-7xl mx-auto">
                <motion.div className="h-2 bg-linear-to-r to-teal-400 from-purple-700 origin-left"
                            style={ { scaleX: scrollYProgress }} />

                <div className="h-120 overflow-y-auto" ref={ ref }>
                    {
                        [ ...Array(10) ].map((_, index) => (
                            <div className="space-y-10 mb-20" key={ index }>
                                <h1 className="text-2xl text-white/90">Lorem</h1>
                                <p className="text-xl text-white/70">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                    Harum impedit labore minima quidem.
                                    Ab accusamus aliquam aperiam architecto, at eos iusto neque, nostrum placeat quia quis
                                    sunt, tenetur veniam voluptates.
                                </p>
                            </div>
                        ))
                    }
                </div>
            </div>
        </div>
    )
}