interface ResultModalProps {
  totalPuntos: number
  onCerrar: () => void
}

export default function ResultModal({ totalPuntos, onCerrar }: ResultModalProps) {
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 px-4">
      <div className="bg-white rounded-2xl border-4 border-purple-600 w-full max-w-sm shadow-2xl p-8 flex flex-col items-center gap-4 text-center">
        <span className="text-6xl">🏆</span>
        <h3 className="text-2xl font-bold text-purple-700">¡Bien hecho!</h3>
        <p className="text-gray-600">Has concluido la actividad.</p>
        <p className="text-4xl font-bold text-purple-600">{totalPuntos} pts</p>
        <button
          onClick={onCerrar}
          className="mt-2 bg-purple-600 hover:bg-purple-700 text-white font-semibold px-8 py-2.5 rounded-xl transition-colors"
        >
          Cerrar
        </button>
      </div>
    </div>
  )
}
