import Button from '../../cmp/button/Button.jsx';
import Arr from '/svg/arr.svg';

const QuestionBlock = D.declare('view.block.QuestionBlock', () => {
    return <div class="question-block">
        <h2 className="question-block__title">Какой из&nbsp;этих ингредиентов не&nbsp;входит в&nbsp;печенье &laquo;Орешки&raquo;?</h2>
        <p className="question-block__notify">Возможен единственный выбор.</p>
        <div className="question-block__body">
            <div className="question-block__text">
                <ul className="question-block__options">
                    <li className="question-block__option">
                        <label className="radio-button">
                            <input type="radio" name="group" className="radio-button__field"/>
                            <span className="radio-button__indicator"></span>
                            <span className="radio-button__desc">Вареная сгущенка</span>
                        </label>
                    </li>
                    <li className="question-block__option">
                        <label className="radio-button">
                            <input type="radio" name="group" className="radio-button__field"/>
                            <span className="radio-button__indicator"></span>
                            <span className="radio-button__desc">Мука</span>
                        </label>
                    </li>
                    <li className="question-block__option">
                        <label className="checkbox">
                            <input type="checkbox" className="checkbox__field"/>
                            <span className="checkbox__indicator"></span>
                            <span className="checkbox__desc">Lorem Ipsum has been the industry's standard 234 dummy text ever since the 1500s</span>
                        </label>
                    </li>
                    <li className="question-block__option">
                        <label className="checkbox">
                            <input type="checkbox" className="checkbox__field"/>
                            <span className="checkbox__indicator"></span>
                            <span className="checkbox__desc">Lorem Ipsum has been the industry's standard 234 dummy text ever since the 1500s</span>
                        </label>
                    </li>
                    <li className="question-block__option">
                        <label className="checkbox">
                            <input type="checkbox" className="checkbox__field"/>
                            <span className="checkbox__indicator"></span>
                            <span className="checkbox__desc">Lorem Ipsum has been the industry's standard 234 dummy text ever since the 1500s</span>
                        </label>
                    </li>
                </ul>
                <div className="question-block__button">
                    <Button class={"button button--primary"}><span>Ответить</span><Arr width="17" height="11"/></Button>
                </div>
            </div>
            <div className="question-block__image">
                <div className="question-block__image-wrapper">
                    <img src="/uploads/images/product4.jpg" alt=""/>
                </div>
            </div>
        </div>
    </div>
})

export default QuestionBlock;
export {QuestionBlock};
