import clsx from "clsx";
import { BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen } from "react-icons/bs";

const ModuleBadge: React.FC<{ module: string; level?: number }> = ({ module, level }) => (
    <div
        className={clsx(
            "flex gap-2 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",
        )}>
        {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">{level.toFixed(1)}</span>)}
    </div>
);

export default ModuleBadge;