import type { CSSProperties } from 'react';

/** "N of M answered" beside a shared progress bar; the text carries the meaning, the bar repeats it. */
export const TaskProgress = ({ answered, total, label }: { answered: number; total: number; label: string }) => {
    const share = total > 0 ? Math.min(100, Math.round((answered / total) * 100)) : 0;

    return (
        <div className="ahr-task-progress ak-status-line" data-testid="questionnaire-progress">
            <span>{label}</span>
            <span
                className="ak-progress"
                role="progressbar"
                aria-label="Questions answered"
                aria-valuetext={label}
                aria-valuemin={0}
                aria-valuemax={total}
                aria-valuenow={answered}
            >
                {/* runtime-style: the fill's width is the answered share, known only from the form's values. */}
                <span className="ak-progress__fill" style={{ '--ak-progress-value': `${share}%` } as CSSProperties} />
            </span>
        </div>
    );
};

export default TaskProgress;