import type { DifficultyRating } from '../types/vocabulary';

interface RatingButtonsProps {
  onRate: (rating: DifficultyRating) => void;
  disabled?: boolean;
}

export function RatingButtons({ onRate, disabled }: RatingButtonsProps) {
  const buttons = [
    { 
      rating: 'again' as DifficultyRating, 
      label: '重来', 
      sublabel: '< 1 min',
      color: 'from-rose-400 to-red-500',
      shadow: 'shadow-rose-200'
    },
    { 
      rating: 'hard' as DifficultyRating, 
      label: '困难', 
      sublabel: '~ 2 days',
      color: 'from-orange-400 to-amber-500',
      shadow: 'shadow-orange-200'
    },
    { 
      rating: 'good' as DifficultyRating, 
      label: '良好', 
      sublabel: '~ 4 days',
      color: 'from-blue-400 to-indigo-500',
      shadow: 'shadow-blue-200'
    },
    { 
      rating: 'easy' as DifficultyRating, 
      label: '简单', 
      sublabel: '~ 7 days',
      color: 'from-emerald-400 to-teal-500',
      shadow: 'shadow-emerald-200'
    },
  ];

  return (
    <div className="grid grid-cols-4 gap-3 mt-8">
      {buttons.map(({ rating, label, sublabel, color, shadow }) => (
        <button
          key={rating}
          onClick={() => onRate(rating)}
          disabled={disabled}
          className={`group relative overflow-hidden bg-gradient-to-b ${color} ${shadow} shadow-lg hover:shadow-xl text-white rounded-2xl py-4 px-2 transition-all duration-200 hover:-translate-y-1 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0`}
        >
          <div className="relative z-10 flex flex-col items-center">
            <span className="text-lg font-bold">{label}</span>
            <span className="text-xs opacity-80 mt-1">{sublabel}</span>
          </div>
          <div className="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 transition-opacity" />
        </button>
      ))}
    </div>
  );
}