import Button from "@/components/Low/Button";
import { Module } from "@/interfaces";
import { LevelPart, UserSolution } from "@/interfaces/exam";
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="flex flex-col w-3/6 h-fit border bg-white rounded-3xl p-12 gap-8">
            {/** 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 ${partIndex + 1}`}</p></div>
            {part.intro!.split('\\n\\n').map((x, index) => <p key={`line-${index}`} className="text-2xl text-clip">{x}</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;