import { useState } from "react";
import { motion } from "framer-motion";

const preguntas = [
  {
    pregunta: "¿Qué regimiento lideró San Martín en San Lorenzo?",
    opciones: ["Granaderos a Caballo", "Patricios", "Infantería"],
    respuestaCorrecta: 0,
  },
  {
    pregunta: "¿Quién salvó a San Martín en el combate de San Lorenzo?",
    opciones: ["Juan Bautista Cabral", "Manuel Belgrano", "Martín Miguel de Güemes"],
    respuestaCorrecta: 0,
  },
];

function MiJuego() {
  const [indicePregunta, setIndicePregunta] = useState(0);
  const [puntaje, setPuntaje] = useState(0);
  const [finalizado, setFinalizado] = useState(false);

  const manejarRespuesta = (indice) => {
    if (indice === preguntas[indicePregunta].respuestaCorrecta) {
      setPuntaje(puntaje + 1);
    }

    if (indicePregunta + 1 < preguntas.length) {
      setIndicePregunta(indicePregunta + 1);
    } else {
      setFinalizado(true);
    }
  };

  return (
    <div className="flex flex-col items-center p-6 bg-white rounded-xl shadow-lg w-96">
      {!finalizado ? (
        <>
          <h2 className="text-xl font-bold mb-4">{preguntas[indicePregunta].pregunta}</h2>
          {preguntas[indicePregunta].opciones.map((opcion, index) => (
            <motion.button
              key={index}
              className="bg-blue-500 text-white py-2 px-4 rounded-lg m-2 w-full hover:bg-blue-700"
              whileTap={{ scale: 0.9 }}
              onClick={() => manejarRespuesta(index)}
            >
              {opcion}
            </motion.button>
          ))}
        </>
      ) : (
        <h2 className="text-xl font-bold">Juego terminado 🎉</h2>
      )}
      <p className="mt-4 text-gray-600">Puntaje: {puntaje} / {preguntas.length}</p>
    </div>
  );
}

export default MiJuego;