Proyectos de Subversion LeadersLinked - SPA

import React from 'react'

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

import { Box } from '@mui/material'

import { parse } from '@app/utils'

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

import Checkbox from '@components/UI/inputs/Checkbox'

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

function QuizMultipleQuestion({

  question,

  onConfirm,

  buttonLabel = 'Finalizar',

  isCurrent = false

}) {

  const {

    control,

    formState: { errors },

    handleSubmit

  } = 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(({ uuid, text }) => (

        <Box

          key={uuid}

          sx={{ display: 'flex', justifyContent: 'space-between', gap: 2 }}

          component='label'

          htmlFor={uuid}

        >

          {parse(text)}

          <Checkbox

            control={control}

            name={question.uuid}

            value={uuid}

            rules={{ required: true }}

          />

        </Box>

      ))}

      {errors[question.uuid] && (

        <FormErrorFeedback>

          Por favor, seleccione al menos una respuesta

        </FormErrorFeedback>

      )}

      <Button

        color='primary'

        onClick={handleConfirm}

        styles={{ marginTop: '1rem' }}

      >

        {buttonLabel}

      </Button>

    </Box>

  )

}

export default QuizMultipleQuestion