import React from 'react'
import Timer from './Timer'

const DIFFICULTY_LABELS = {
  'molt-facil': 'Molt fàcil',
  'facil': 'Fàcil',
  'mitja': 'Mitjà',
  'dificil': 'Difícil',
  'expert': 'Expert',
}

function ScoreBoard({ difficulty, errors, timer, showErrors }) {
  return (
    <div className="score-board">
      <div className="score-item">
        <span className="score-label">Dificultat</span>
        <span className="score-value">{DIFFICULTY_LABELS[difficulty]}</span>
      </div>
      {showErrors && (
        <div className="score-item">
          <span className="score-label">Errors</span>
          <span className="score-value errors-count">{errors}</span>
        </div>
      )}
      <div className="score-item">
        <span className="score-label">Temps</span>
        <span className="score-value"><Timer seconds={timer} /></span>
      </div>
    </div>
  )
}

export default React.memo(ScoreBoard)