Proyectos de Subversion LeadersLinked - SPA

import React from 'react';

import { Box } from '@mui/material';

import { useForm } from 'react-hook-form';

import parse from 'html-react-parser';

import FormErrorFeedback from '@app/components/UI/form/FormErrorFeedback';

import Button from '@app/components/UI/buttons/Buttons';

function QuizSimpleQuestion({ question, onConfirm, buttonLabel = 'Finalizar', isCurrent = false }) {

  const {

    register,

    handleSubmit,

    formState: { errors }

  } = useForm();

  const handleConfirm = handleSubmit((data) => {

    onConfirm(data[question.uuid]);

  });

  return (

    <Box sx={{ display: isCurrent ? 'initial' : 'none' }}>

      <Box sx={{ '& p': { fontWeight: '600', fontSize: '1.5rem' } }}>{parse(question.text)}</Box>

      {question.answers.map((answer) => (

        <Box key={answer.uuid} sx={{ display: 'flex', justifyContent: 'space-between', gap: 2 }}>

          {parse(answer.text)}

          <input

            type='radio'

            name={question.uuid}

            value={answer.uuid}

            ref={register({ required: true })}

          />

        </Box>

      ))}

      {errors[question.uuid] && (

        <FormErrorFeedback>Por favor, seleccione una respuesta</FormErrorFeedback>

      )}

      <Button color='primary' onClick={() => handleConfirm()} styles={{ marginTop: '1rem' }}>

        {buttonLabel}

      </Button>

    </Box>

  );

}

export default QuizSimpleQuestion;