"use client"

import { motion, useSpring } from "motion/react"
import { useEffect } from "react"

function LoadingProgressBar() {
    const progress = useMockLoading()

    return (
        <div className="container">
            <div className="progress-container">
                <motion.div
                    className="progress-bar"
                    style={{ scaleX: progress }}
                />
            </div>
            <StyleSheet />
        </div>
    )
}

/**
 * ==============   Utils   ================
 */
function useMockLoading() {
    const progress = useSpring(0)

    useEffect(() => {
        const interval = setInterval(() => {
            const newProgress = progress.get() + Math.random() * 0.2

            if (newProgress >= 1) {
                clearInterval(interval)
            }

            progress.set(newProgress)
        }, 500)

        return () => clearInterval(interval)
    }, [progress])

    return progress
}

/**
 * ==============   Styles   ================
 */
function StyleSheet() {
    return (
        <style>
            {`
             .container {
                display: flex;
                justify-content: center;
                align-items: center;
                color: #f5f5f5;
                border: 1px solid #1d2628;
                padding: 10px;
                border-radius: 20px;
            }

            .progress-container {
                width: 100%;
                max-width: 300px;
                height: 10px;
                background-color: var(--divider);
                border-radius: 20px;
                overflow: hidden;
            }

            .progress-bar {
                height: 100%;
                width: 400px;
                background-color: #ff0088;
                border-radius: 20px;
                will-change: transform;
                transform-origin: 0% 50%;
            }
            `}
        </style>
    )
}

export default LoadingProgressBar