import React, { useState } from "react";
import "./styles/PsychTestQuestion.css";

const PsychTestQuestion = (props) => {
    const answerChangeHandler = (event) => {
        props.onChangeAnswer(event.target.value, event.target.name);
    };
    return (
        <div className="question">
            <div className="question__account">{+props.account + 1}</div>
            <p className="question__title">{props.name}</p>
            <div className="question__answers">
                <p>Не важно</p>
                <label className="question__answer">
                    <input
                        name={props.account}
                        type="radio"
                        value="1"
                        onChange={answerChangeHandler}
                    />
                    <span>1</span>
                </label>
                <label className="question__answer">
                    <input
                        name={props.account}
                        type="radio"
                        value="2"
                        onChange={answerChangeHandler}
                    />
                    <span>2</span>
                </label>
                <label className="question__answer">
                    <input
                        name={props.account}
                        type="radio"
                        value="3"
                        onChange={answerChangeHandler}
                    />
                    <span>3</span>
                </label>
                <label className="question__answer">
                    <input
                        name={props.account}
                        type="radio"
                        value="4"
                        onChange={answerChangeHandler}
                    />
                    <span>4</span>
                </label>
                <label className="question__answer">
                    <input
                        name={props.account}
                        type="radio"
                        value="5"
                        onChange={answerChangeHandler}
                    />
                    <span>5</span>
                </label>
                <p>Очень важно</p>
            </div>
        </div>
    );
};

export default PsychTestQuestion;
