import { jsx as _jsx } from "react/jsx-runtime";
import { darken } from 'polished';
import { useEffect, useState } from 'react';
import { ProgressBar } from '../progressbar/ProgressBar.component';
export function DurationBasedProgressBar({ duration, color, }) {
    const [progress, setProgress] = useState(0);
    useEffect(() => {
        if (duration) {
            const interval = setInterval(() => {
                setProgress((prevProgress) => prevProgress + (100 / duration) * 1000);
            }, 1000);
            return () => {
                clearInterval(interval);
            };
        }
    }, [duration]);
    return (_jsx("div", { style: {
            position: 'absolute',
            bottom: 0,
            left: 0,
            width: '100%',
            borderRadius: 4,
        }, children: _jsx(ProgressBar, { size: "custom", percentage: progress, color: color, backgroundColor: `${darken(0.1, color)}`, height: '4px' }) }));
}
