import React, { memo, useCallback } from 'react'

interface ConfidenceButtonsProps {
  selectedLevel: number | null
  onSelect: (level: number) => void
  disabled?: boolean
  className?: string
}

const confidenceConfig = {
  1: { label: '完全不懂', color: 'bg-red-100 text-red-700 border-red-200 hover:bg-red-200' },
  2: { label: '模糊', color: 'bg-orange-100 text-orange-700 border-orange-200 hover:bg-orange-200' },
  3: { label: '一般', color: 'bg-yellow-100 text-yellow-700 border-yellow-200 hover:bg-yellow-200' },
  4: { label: '熟悉', color: 'bg-blue-100 text-blue-700 border-blue-200 hover:bg-blue-200' },
  5: { label: '非常熟悉', color: 'bg-green-100 text-green-700 border-green-200 hover:bg-green-200' }
}

export const ConfidenceButtons = memo<ConfidenceButtonsProps>(({
  selectedLevel,
  onSelect,
  disabled = false,
  className = ''
}) => {
  const handleSelect = useCallback((level: number) => {
    if (!disabled) {
      onSelect(level)
    }
  }, [disabled, onSelect])

  return (
    <div className={`space-y-3 ${className}`}>
      <h3 className="text-lg font-semibold text-gray-900 mb-4 text-left">
        請選擇您對這個詞彙的熟悉程度：
      </h3>
      <div className="grid grid-cols-5 gap-3">
        {Object.entries(confidenceConfig).map(([level, config]) => {
          const levelNum = parseInt(level)
          const isSelected = selectedLevel === levelNum

          return (
            <button
              key={level}
              onClick={() => handleSelect(levelNum)}
              disabled={disabled}
              className={`
                px-3 py-2 rounded-lg border-2 text-center font-medium transition-all duration-200
                ${isSelected
                  ? 'ring-2 ring-blue-400 ring-opacity-75 transform scale-105'
                  : ''
                }
                ${disabled
                  ? 'opacity-50 cursor-not-allowed'
                  : 'cursor-pointer active:scale-95'
                }
                ${config.color}
              `}
            >
              <div className="flex items-center justify-center h-8">
                <span className="text-sm">
                  {config.label}
                </span>
              </div>
            </button>
          )
        })}
      </div>
    </div>
  )
})

ConfidenceButtons.displayName = 'ConfidenceButtons'