import {Step} from "@/interfaces";
import {getGradingLabel, getLevelLabel} from "@/utils/score";
import clsx from "clsx";
import {BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";

const ModuleBadge: React.FC<{module: string; level?: number; gradingSystem?: Step[]; className?: string}> = ({
	module,
	level,
	gradingSystem,
	className,
}) => (
	<div
		className={clsx(
			"flex gap-2 justify-center items-center w-fit text-white -md:px-4 xl:px-4 md:px-2 py-2 rounded-xl",
			module === "reading" && "bg-ielts-reading",
			module === "listening" && "bg-ielts-listening",
			module === "writing" && "bg-ielts-writing",
			module === "speaking" && "bg-ielts-speaking",
			module === "level" && "bg-ielts-level",
			className,
		)}>
		{module === "reading" && <BsBook className="w-4 h-4" />}
		{module === "listening" && <BsHeadphones className="w-4 h-4" />}
		{module === "writing" && <BsPen className="w-4 h-4" />}
		{module === "speaking" && <BsMegaphone className="w-4 h-4" />}
		{module === "level" && <BsClipboard className="w-4 h-4" />}
		{/* do not switch to level && it will convert the 0.0 to 0*/}
		{level !== undefined && (
			<span className="text-sm">{module === "level" && gradingSystem ? getGradingLabel(level, gradingSystem) : level.toFixed(1)}</span>
		)}
	</div>
);

export default ModuleBadge;