import Button from "@/components/Low/Button";
import { Module } from "@/interfaces";
import { LevelPart, UserSolution } from "@/interfaces/exam";
import clsx from "clsx";
import { ReactNode } from "react";
import { BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen } from "react-icons/bs";

interface Props {
    partIndex: number;
    part: LevelPart // for now
    onNext: () => void;
}

const PartDivider: React.FC<Props> = ({ partIndex, part, onNext }) => {

    const moduleIcon: { [key in Module]: ReactNode } = {
        reading: <BsBook className="text-ielts-reading w-6 h-6" />,
        listening: <BsHeadphones className="text-ielts-listening w-6 h-6" />,
        writing: <BsPen className="text-ielts-writing w-6 h-6" />,
        speaking: <BsMegaphone className="text-ielts-speaking w-6 h-6" />,
        level: <BsClipboard className="text-white w-6 h-6" />,
    };

    return (
        <div className={clsx("flex flex-col h-fit border bg-white rounded-3xl p-12 gap-8", part.intro ? "w-3/6" : "items-center my-auto")}>
            {/** only level for now */}
            <div className="flex flex-row gap-4 items-center"><div className="w-12 h-12 bg-ielts-level flex items-center justify-center rounded-lg">{moduleIcon["level"]}</div><p className="text-3xl">{part.intro ? `Part ${partIndex + 1}` : "Placement Test"}</p></div>
            {part.intro && part.intro.split('\\n\\n').map((x, index) => <p key={`line-${index}`} className="text-2xl text-clip" dangerouslySetInnerHTML={{__html: x.replace('that is not correct', 'that is <span class="font-bold"><u>not correct</u></span>')}}></p>)}
            <div className="flex items-center justify-center mt-4">
                <Button color="purple" onClick={() => onNext()} className="max-w-[200px] self-end w-full text-2xl">
                    {partIndex === 0 ? `Start now`: `Start Part ${partIndex + 1}`}
                </Button>
            </div>
        </div>
    )
}

export default PartDivider;