import React from "react";
import anwserIconSafe from "../../assets/img/icons/anwser_icon_safe.svg";
import anwserIconUnsafe from "../../assets/img/icons/anwser_icon_unsafe.svg";

import { useGame } from "../../hooks/useGame";
export default function GameQuestion({ questionId, correctAnswer }, ...props) {
	const { answerQuestion, contextGameDatas } = useGame();
	const objectPictureUrl = contextGameDatas.gameObjects[questionId].attrs.objectPictureUrl;

	function handleAnswer(questionId, answer) {
		answerQuestion(questionId, answer);
	}

	return (
		<div className='modal-content-container game-question-container'>
			<div className='modal-content-container__content'>
				<h3 className='titling-construction '>Trouvé !</h3>
				<h2>securisé ou risqué ?</h2>

				<p className='question'>
					Est-ce que la situation comporte un risque majeur ou identifiez vous un bon
					comportement ?
				</p>
				<div className='game-question-container__answer-buttons-container'>
					<button
						className='game-question-container__answer-button'
						onClick={() => handleAnswer(questionId, "safe")}>
						<img src={anwserIconSafe} alt='' />
					</button>
					<button
						className='game-question-container__answer-button'
						onClick={() => handleAnswer(questionId, "unsafe")}>
						<img src={anwserIconUnsafe} alt='' />
					</button>
				</div>
				<p className='pt-8'>{correctAnswer}</p>
			</div>
			<div className='modal-content-container__cover'>
				<img src={objectPictureUrl} alt='' />
			</div>
		</div>
	);
}
