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

interface Props {
	label: string;
	percentage: number;
	color: "red" | "rose" | "purple" | Module;
	mark?: number;
	markLabel?: string;
	useColor?: boolean;
	className?: string;
	textClassName?: string;
}

export default function ProgressBar({label, percentage, color, mark, markLabel, useColor = false, className, textClassName}: Props) {
	const progressColorClass: {[key in typeof color]: string} = {
		red: "bg-mti-red-light",
		rose: "bg-mti-rose-light",
		purple: "bg-mti-purple-light",
		reading: "bg-ielts-reading",
		listening: "bg-ielts-listening",
		writing: "bg-ielts-writing",
		speaking: "bg-ielts-speaking",
		level: "bg-ielts-level",
	};

	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",
			)}>
			{mark && (
				<div style={{left: `${mark}%`}} className={clsx("w-3 h-2 bg-mti-gray-davy/60 absolute -translate-x-1/2 top-0 z-20 cursor-pointer")} />
			)}
			<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={clsx("z-[1] justify-self-center text-white text-sm font-bold", textClassName)}>{label}</span>
		</div>
	);
}