import { type FC } from "react";

type UploadProgressBarProps = {
    progress: number;
    label?: string;
};

const UploadProgressBar: FC<UploadProgressBarProps> = ({ progress, label }) => {
    const clampedProgress = Math.min(100, Math.max(0, progress));

    return (
        <div className="flex w-full flex-col items-center gap-2 py-2">
            <div className="h-1.5 w-full overflow-hidden rounded-full bg-gray-200">
                <div
                    className="h-full rounded-full bg-black transition-all duration-200"
                    style={{ width: `${clampedProgress}%` }}
                />
            </div>
            <div className="text-description text-xs">
                {label ?? `${clampedProgress}٪`}
            </div>
        </div>
    );
};

export default UploadProgressBar;
