import {Module} from "@/interfaces";
import clsx from "clsx";

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

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

	return (
		<div
			className={clsx(
				"relative rounded-full overflow-hidden flex items-center justify-center",
				className,
				!useColor ? "bg-mti-gray-anti-flash" : progressColorClass[color],
				useColor && "bg-opacity-20",
			)}>
			<div
				style={{width: `${percentage}%`}}
				className={clsx("absolute transition-all duration-300 ease-in-out 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>
	);
}