import { progressTrackClassName } from '@admin/components/ui/field-styles';

type UploadProgressProps = {
    value: number;
    visible?: boolean;
    showLabel?: boolean;
};

export function UploadProgress({ value, visible = true, showLabel = true }: UploadProgressProps) {
    if (!visible || value <= 0) {
        return null;
    }

    const percentage = Math.min(100, Math.max(0, Math.round(value)));

    return (
        <div className={progressTrackClassName}>
            <div
                className="ti-main-progress-bar bg-primary text-xs text-white text-center transition-all duration-150"
                role="progressbar"
                style={{ width: `${percentage}%` }}
                aria-valuenow={percentage}
                aria-valuemin={0}
                aria-valuemax={100}
            >
                {showLabel ? `${percentage}%` : null}
            </div>
        </div>
    );
}