import './questionBlock.scss';
import Button from '../../cmp/button/Button.jsx';
import Arr from '/svg/arr.svg';
import LinkIcon from '/svg/link.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="picker-button">
                            <input type="radio" name="group" className="picker-button__field"/>
                            <span className="picker-button__indicator"></span>
                            <span className="picker-button__desc">Вареная сгущенка</span>
                        </label>
                    </li>
                    <li className="question-block__option">
                        <label className="picker-button">
                            <input type="radio" name="group" className="picker-button__field"/>
                            <span className="picker-button__indicator"></span>
                            <span className="picker-button__desc">Мука</span>
                        </label>
                    </li>
                    <li className="question-block__option">
                        <label className="picker-button picker-button--correct">
                            <span className="picker-button__indicator"></span>
                            <span className="picker-button__desc">Вареная сгущенка <b>Это верный ответ</b><a class="picker-button__link" href="#" aria-label="Просмотр карточки"><LinkIcon width="32" height="32"/></a></span>
                        </label>
                    </li>
                    <li className="question-block__option">
                        <label className="picker-button picker-button--incorrect">
                            <span className="picker-button__indicator"></span>
                            <span className="picker-button__desc">Вареная сгущенка <b>Этот ответ был выбран неверно</b></span>
                        </label>
                    </li>
                    <li className="question-block__option">
                        <label className="picker-button picker-button--multiple">
                            <input type="checkbox" className="picker-button__field"/>
                            <span className="picker-button__indicator"></span>
                            <span className="picker-button__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="picker-button picker-button--multiple">
                            <input type="checkbox" className="picker-button__field"/>
                            <span className="picker-button__indicator"></span>
                            <span className="picker-button__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="picker-button picker-button--multiple">
                            <input type="checkbox" className="picker-button__field"/>
                            <span className="picker-button__indicator"></span>
                            <span className="picker-button__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="picker-button picker-button--multiple picker-button--correct">
                            <span className="picker-button__indicator"></span>
                            <span className="picker-button__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="picker-button picker-button--multiple picker-button--incorrect">
                            <span className="picker-button__indicator"></span>
                            <span className="picker-button__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};
