"use client"

import dynamic from "next/dynamic"
import type { Exercise, ExerciseType } from "@/curriculum/types"

const EjercicioSensibilizacion = dynamic(() => import("./ejercicio-sensibilizacion"), { ssr: false })
const EjercicioConciencia = dynamic(() => import("./ejercicio-conciencia"), { ssr: false })
const EjercicioEleccion = dynamic(() => import("./ejercicio-eleccion"), { ssr: false })
const EjercicioSecuencia = dynamic(() => import("./ejercicio-secuencia"), { ssr: false })
const EjercicioPalabra = dynamic(() => import("./ejercicio-palabra"), { ssr: false })
const EjercicioLectura = dynamic(() => import("./ejercicio-lectura"), { ssr: false })
const EjercicioTrazo = dynamic(() => import("./ejercicio-trazo"), { ssr: false })

const componentMap: Record<ExerciseType, React.ComponentType<{ exercise: Exercise; onComplete: (correct: boolean) => void }>> = {
  sensibilizacion: EjercicioSensibilizacion,
  conciencia: EjercicioConciencia,
  trazo: EjercicioTrazo,
  eleccion: EjercicioEleccion,
  emparejar: EjercicioConciencia,
  secuencia: EjercicioSecuencia,
  palabra: EjercicioPalabra,
  problema: EjercicioLectura,
  lectura: EjercicioLectura,
}

interface Props {
  exercise: Exercise
  onComplete: (correct: boolean) => void
}

export default function ExerciseDispatcher({ exercise, onComplete }: Props) {
  const Component = componentMap[exercise.type] || EjercicioSensibilizacion
  return <Component exercise={exercise} onComplete={onComplete} />
}