interface DifficultyBadgeProps {
  level: string
  className?: string
}

export const DifficultyBadge: React.FC<DifficultyBadgeProps> = ({
  level,
  className = ''
}) => {
  const getBadgeStyle = (level: string) => {
    switch (level?.toUpperCase()) {
      case 'A1':
        return 'bg-green-100 text-green-800 border-green-200'
      case 'A2':
        return 'bg-blue-100 text-blue-800 border-blue-200'
      case 'B1':
        return 'bg-yellow-100 text-yellow-800 border-yellow-200'
      case 'B2':
        return 'bg-orange-100 text-orange-800 border-orange-200'
      case 'C1':
        return 'bg-red-100 text-red-800 border-red-200'
      case 'C2':
        return 'bg-purple-100 text-purple-800 border-purple-200'
      default:
        return 'bg-gray-100 text-gray-800 border-gray-200'
    }
  }

  return (
    <span
      className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${getBadgeStyle(level)} ${className}`}
    >
      {level?.toUpperCase() || 'N/A'}
    </span>
  )
}