import { useEffect, useState } from 'react';

export default function ProgressBar(): React.JSX.Element {
    const [time, setTime] = useState(0); // Initializing state for time
    const maxTime: number = 100; // Setting maximum time

    useEffect(() => {
        console.log('SETTING INTERVAL', time); // Log when interval is set up
        const interval = setInterval(() => {
            if (time < maxTime) {
                setTime(prev => prev + 1); // Increment time by 1 if it's less than maxTime
            } else {
                clearInterval(interval); // Clear the interval if time reaches maxTime
            }
        }, 100); // Run the interval every 100 milliseconds

        // Cleanup function for when the component unmounts or the dependency changes
        return () => {
            console.log("end->", time); // Log when the component unmounts or dependency changes
            clearInterval(interval); // Clear the interval to avoid memory leaks
        };
    }, [time]); // Dependency array with 'time', so the effect runs whenever 'time' changes

    return (
        <>
            {/* Render a progress bar with value set to 'time' and maximum value set to 'maxTime' */}
            <progress id='prog' value={time} max={maxTime} />
            {/* Display the percentage value of 'time' */}
            <span>{time}%</span>
        </>
    );
}