import { RingProgress } from "@mantine/core";
import classes from './AnimatedRoundedProgress.module.css'

interface AnimatedRoundedProgressProps {
    value: number;
    size?: number;
    color?: string;
}

export function AnimatedRoundedProgress(props : AnimatedRoundedProgressProps) {
    const value = Math.min(100, Math.max(0, props.value));
    const color = props.color || 'white';
    return (
        <RingProgress
            size={props.size || 20}
            sections={[{ value, color: color }, { value: 100 - value, color: 'transparent' }]}
            transitionDuration={250}
            thickness={2}
            roundCaps
            className={classes.animatedRoundedProgress}
        />
    );
}