"use client"

import { motion } from "framer-motion"
import { speak } from "@/lib/speech"
import { GatoMascota } from "@/components/child/gato-mascota"
import type { Exercise } from "@/curriculum/types"

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

export default function EjercicioSensibilizacion({ exercise, onComplete }: Props) {
  const { content } = exercise
  const hasOptions = content.options && content.options.length > 0

  const handleClick = async (option: { label: string; correct: boolean }) => {
    if (content.audioText) await speak(content.audioText)
    onComplete(option.correct)
  }

  return (
    <div className="flex flex-col items-center gap-6">
      <GatoMascota mood="coach" message={content.instruction} size="sm" />

      <motion.div
        initial={{ opacity: 0, scale: 0.9 }}
        animate={{ opacity: 1, scale: 1 }}
        className="text-6xl text-center"
      >
        {content.emoji && <span>{content.emoji}</span>}
      </motion.div>

      {hasOptions && (
        <div className="flex flex-wrap gap-4 justify-center max-w-sm">
          {content.options!.map((opt, i) => (
            <motion.button
              key={opt.label}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: i * 0.1 }}
              onClick={() => handleClick(opt)}
              className="touch-target-lg rounded-2xl px-8 py-6 text-xl font-display font-bold shadow-md active:scale-95 transition-transform bg-white"
            >
              {opt.label}
            </motion.button>
          ))}
        </div>
      )}

      {!hasOptions && (
        <button
          onClick={() => onComplete(true)}
          className="bg-primary text-primary-foreground touch-target-lg rounded-2xl px-8 py-4 text-xl font-display font-bold"
        >
          ¡Lo hice!
        </button>
      )}
    </div>
  )
}