import { ConfidenceLevel } from '@/types/review'

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

export const ConfidenceButtons: React.FC<ConfidenceButtonsProps> = ({
  selectedLevel,
  onSelect,
  disabled = false,
  className = ''
}) => {
  const confidenceLevels: { level: ConfidenceLevel; label: string; color: string }[] = [
    { level: 1, label: '完全不會', color: 'bg-red-500 hover:bg-red-600' },
    { level: 2, label: '不太會', color: 'bg-orange-500 hover:bg-orange-600' },
    { level: 3, label: '一般', color: 'bg-yellow-500 hover:bg-yellow-600' },
    { level: 4, label: '還算會', color: 'bg-blue-500 hover:bg-blue-600' },
    { level: 5, label: '非常熟悉', color: 'bg-green-500 hover:bg-green-600' }
  ]

  return (
    <div className={`space-y-4 ${className}`}>
      <h3 className="text-lg font-medium text-gray-900 text-center">
        對這個單字的熟悉程度如何？
      </h3>

      <div className="grid grid-cols-1 sm:grid-cols-5 gap-3">
        {confidenceLevels.map(({ level, label, color }) => (
          <button
            key={level}
            onClick={() => onSelect(level)}
            disabled={disabled}
            className={`
              px-4 py-3 rounded-lg text-white font-medium text-sm
              transition-all duration-200 transform
              ${selectedLevel === level
                ? `${color} ring-2 ring-offset-2 ring-gray-400 scale-105`
                : `${color} hover:scale-105`
              }
              ${disabled ? 'opacity-50 cursor-not-allowed' : 'hover:shadow-lg active:scale-95'}
            `}
          >
            <div className="text-center">
              <div className="text-lg font-bold">{level}</div>
              <div className="text-xs">{label}</div>
            </div>
          </button>
        ))}
      </div>

      {selectedLevel && (
        <p className="text-center text-sm text-gray-600">
          已選擇: {confidenceLevels.find(c => c.level === selectedLevel)?.label}
        </p>
      )}
    </div>
  )
}