"use client"

import { useState } from "react"
import { motion, AnimatePresence } 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 EjercicioPalabra({ exercise, onComplete }: Props) {
  const { content } = exercise
  const options = content.options || []

  const handleChoose = async (opt: (typeof options)[0]) => {
    if (opt.id === "escuchar") {
      if (content.audioText) await speak(content.audioText)
      return
    }
    onComplete(opt.correct)
  }

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

      {content.imageEmoji && (
        <motion.div
          initial={{ scale: 0 }}
          animate={{ scale: 1 }}
          className="text-6xl"
        >
          {content.imageEmoji}
        </motion.div>
      )}

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