import './Answer.css'

const Answer = ({ answer, index, onClick, isRevealed }) => {
  const getAnswerClass = () => {
    if (!isRevealed) return 'answer-hidden'
    return 'answer-revealed'
  }

  const getPointsColor = (points) => {
    if (points >= 80) return '#4ecdc4'
    if (points >= 60) return '#95e1d3'
    if (points >= 40) return '#fce38a'
    if (points >= 20) return '#f38181'
    return '#ff6b6b'
  }

  return (
    <button
      className={`answer-button ${getAnswerClass()}`}
      onClick={onClick}
      disabled={isRevealed}
      style={
        isRevealed
          ? {
              borderColor: getPointsColor(answer.points),
              background: `linear-gradient(135deg, ${getPointsColor(
                answer.points
              )}20, ${getPointsColor(answer.points)}40)`,
            }
          : {}
      }
    >
      {isRevealed ? (
        <>
          <span className="answer-text">{answer.text}</span>
          <span
            className="answer-points"
            style={{ color: getPointsColor(answer.points) }}
          >
            {answer.points}
          </span>
        </>
      ) : (
        <span
          className="answer-points-hidden"
          style={{ color: getPointsColor(answer.points) }}
        >
          {answer.points}
        </span>
      )}
    </button>
  )
}

export default Answer