import clsx from "clsx";

interface Props {
	label: string;
	percentage: number;
	color: "blue" | "orange" | "green";
	className?: string;
}

export default function ProgressBar({label, percentage, color, className}: Props) {
	const progressColorClass: {[key in typeof color]: string} = {
		blue: "bg-mti-blue-light",
		orange: "bg-mti-orange-light",
		green: "bg-mti-green-light",
	};

	return (
		<div className={clsx("relative rounded-full bg-mti-gray-anti-flash overflow-hidden flex items-center justify-center", className)}>
			<div style={{width: `${percentage}%`}} className={clsx("absolute top-0 left-0 h-full overflow-hidden", progressColorClass[color])} />
			<span className="z-10 justify-self-center text-white text-sm font-bold">{label}</span>
		</div>
	);
}