import {FunctionComponent} from 'react'
import {ITriviaQuestion} from '../../../models/ITriviaQuestion.ts'

const DetailUI: FunctionComponent<ITriviaQuestion> = (props) => {
    const {type, difficulty, category, question, correctAnswer, incorrectAnswers} = props
    const answers = [...incorrectAnswers, correctAnswer]

    return (
        <>
            <h1>
                <button className="back-button">
                    <h1>&lt;--</h1>
                </button>
                {question}
            </h1>

            <div className="question-details">
                <strong>Type:</strong> {type}
            </div>
            <div className="question-details">
                <strong>Difficulty:</strong> {difficulty}
            </div>
            <div className="question-details">
                <strong>Category:</strong> {category}
            </div>
            <div className="question-details">
                <strong>Answers:</strong>

                <ul>
                    {answers.map(answer => (
                        <li key={answer}>
                            <input type="radio" id={answer} checked={answer === correctAnswer}/>
                            <label htmlFor={answer}>{answer}</label>
                        </li>
                    ))}
                </ul>
            </div>
        </>
    )
}

export default DetailUI
