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

interface Props {
    sectionIndex: number;
    sectionLabel: string;
    defaultTitle: string;
    module: Module;
    section: LevelPart | ReadingPart | ListeningPart | WritingExercise | SpeakingExercise;
    onNext: () => void;
}

const PartDivider: React.FC<Props> = ({ sectionIndex, sectionLabel, section, module, defaultTitle, onNext }) => {
    const iconStyle = "text-white w-6 h-6";
    const moduleIcon: { [key in Module]: ReactNode } = {
        reading: <BsBook className={iconStyle} />,
        listening: <BsHeadphones className={iconStyle} />,
        writing: <BsPen className={iconStyle} />,
        speaking: <BsMegaphone className={iconStyle} />,
        level: <BsClipboard className={iconStyle} />,
    };

    return (
        <div className={clsx("flex flex-col h-fit border bg-white rounded-3xl p-12 gap-8", section.intro ? "w-3/6" : "items-center my-auto")}>
            <div className="flex flex-row gap-4 items-center">
                <div className={`w-12 h-12 bg-ielts-${module} flex items-center justify-center rounded-lg`}>{moduleIcon[module]}</div>
                <p className="text-3xl">{section.intro ? `${sectionLabel} ${sectionIndex + 1}` : defaultTitle}</p>
            </div>
            {section.intro && section.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
                    onClick={() => onNext()}
                    className={clsx(
                        "max-w-[200px] self-end w-full text-2xl text-white",
                        "rounded-full transition ease-in-out duration-300 disabled:cursor-not-allowed cursor-pointer select-none",
                        "py-4 px-6",
                        `bg-ielts-${module} hover:bg-ielts-${module}/70`
                    )}>
                    {sectionIndex === 0 ? `Start now` : `Start ${sectionLabel} ${sectionIndex + 1}`}
                </button>
            </div>
        </div>
    )
}

export default PartDivider;