import useExamEditorStore from "@/stores/examEditor";
import { SpeakingExercise, InteractiveSpeakingExercise } from "@/interfaces/exam";
import Speaking2 from "./Speaking2";
import InteractiveSpeaking from "./InteractiveSpeaking";
import Speaking1 from "./Speaking1";
import { Module } from "@/interfaces";

interface Props {
    sectionId: number;
    exercise: SpeakingExercise | InteractiveSpeakingExercise;
    module: Module;
}

const Speaking: React.FC<Props> = ({ sectionId, module = "speaking" }) => {
    const { state } = useExamEditorStore(
        (state) => state.modules[module].sections.find((section) => section.sectionId === sectionId)!
    );

    return (
        <>
            <div className="mx-auto p-3 space-y-6">
                <div className="p-4">
                    <div className="flex flex-col space-y-6">
                        {sectionId === 1 && <Speaking1 sectionId={sectionId} exercise={state as InteractiveSpeakingExercise } />}
                        {sectionId === 2 && <Speaking2 sectionId={sectionId} exercise={state as SpeakingExercise} />}
                        {sectionId === 3 && <InteractiveSpeaking sectionId={sectionId} exercise={state as InteractiveSpeakingExercise} />}
                    </div>
                </div>
            </div>
        </>
    );
};

export default Speaking;