import React from 'react';
interface ICardPreguntasProps {
    pregunta: any;
}
const CardPreguntasTransversal : React.FC<ICardPreguntasProps> = ({pregunta}) => {
    const [indexSubPregunta, setIndexSubPregunta] = React.useState(0);

    const onclickSiguiente = () => {
        if (indexSubPregunta < pregunta.preguntas.length - 1) {
            setIndexSubPregunta(indexSubPregunta + 1);
        } else {
            setIndexSubPregunta(0);
        }
    };
    return (
        <div>
            {pregunta.preguntas[indexSubPregunta] && (
                    <div key={indexSubPregunta}> 
                        <h1>{pregunta.preguntas[indexSubPregunta].pregunta}</h1>
                        <div>
                            {pregunta.preguntas[indexSubPregunta].opciones.map((opcion: any) => (
                                <div key={opcion.id}>
                                    <input
                                        type="radio"
                                        id={opcion.id}
                                        name={`question-${pregunta.preguntas[indexSubPregunta].id}`}
                                        value={opcion.texto}
                                    />
                                    <label htmlFor={opcion.id}>{opcion.texto}</label>
                                </div>
                            ))}
                        </div>
                    </div>
                )}
        </div>
    );
}

export default CardPreguntasTransversal;