import React from 'react'
import tr from './img_end.jpg';
import './End.css'

// import { Link } from 'react-router-dom';

function End() {
    let scores = []
    let score = 0
    const answers = JSON.parse(localStorage.getItem('Answers'))
    const solutions = JSON.parse(localStorage.getItem('Solutions'))
    for (let i = 0; i < answers.length ; i++) {

        if (answers[i] === solutions[i]) {

            scores[i] = 1

        }
        else {

            scores[i] = 0
        }
        score += scores[i]
    }
    

    return (
        <>
            <div className="card" style={{ fontSize: '30px', textAlign: "center" }} >
                <div className='card-header'>
                    -채점표-
                <div className='card-body'>
                        <h3 className='card-title'>이름 : {localStorage.getItem('name')}</h3>

                        {scores.map((score, index) => {
                            
                        return (score===1) ? <p className='card-text'>Quiz {index+1} : 'O' </p>  : <p className='card-text'>Quiz {index+1} : 'X' </p>
                                // if (score === 1) {
                                //     return <p className='card-text'>Quiz {index+1} : 'O' </p>
                                // }
                                // else { return <p className='card-text'>Quiz {index+1} : 'X' </p> }

                            

                        })}
                        <p className='card-text'>Total Score : {score}</p>
                    </div>
                    <div style={{ marginTop: '100px' }} className="Box text-center">
                        <img src={tr} alt="수고" />

                    </div>
                </div>
            </div>
        </>

    )
}

export default End;