import React from 'react';
import './ProgressBar.scss'; // Create this CSS file for styling

interface ProgressBarProps {
    progress: number;
}

export const ProgressBar: React.FC<ProgressBarProps> = ({ progress }) => {
    return (
        <div className="progress-circle">
            <svg className="progress-ring" width="120" height="120">
                <circle className="progress-ring__circle" stroke="currentColor" strokeWidth="4" fill="transparent" r="56" cx="60" cy="60" style={{ strokeDasharray: 352, strokeDashoffset: 352 - (progress / 100) * 352 }} />
            </svg>
            <div className="progress-text">{Math.round(progress)}%</div>
        </div>
    );
};