import React from 'react';
import { cn } from '../../../lib/utils';

interface PriorityBadgeProps {
  score: number; // 0-100
  level: 'critical' | 'important' | 'standard' | 'info';
  className?: string;
  showScore?: boolean;
}

/**
 * PriorityBadge - Visual indicator for alert priority
 *
 * Priority Levels:
 * - Critical (90-100): Red with pulse animation
 * - Important (70-89): Orange/Yellow
 * - Standard (50-69): Blue
 * - Info (0-49): Gray
 */
export const PriorityBadge: React.FC<PriorityBadgeProps> = ({
  score,
  level,
  className,
  showScore = true,
}) => {
  const getStyles = () => {
    switch (level) {
      case 'critical':
        return {
          bg: 'bg-red-100 dark:bg-red-900/30',
          text: 'text-red-800 dark:text-red-200',
          border: 'border-red-300 dark:border-red-700',
          pulse: 'animate-pulse',
        };
      case 'important':
        return {
          bg: 'bg-orange-100 dark:bg-orange-900/30',
          text: 'text-orange-800 dark:text-orange-200',
          border: 'border-orange-300 dark:border-orange-700',
          pulse: '',
        };
      case 'standard':
        return {
          bg: 'bg-blue-100 dark:bg-blue-900/30',
          text: 'text-blue-800 dark:text-blue-200',
          border: 'border-blue-300 dark:border-blue-700',
          pulse: '',
        };
      case 'info':
      default:
        return {
          bg: 'bg-gray-100 dark:bg-gray-800',
          text: 'text-gray-700 dark:text-gray-300',
          border: 'border-gray-300 dark:border-gray-600',
          pulse: '',
        };
    }
  };

  const styles = getStyles();
  const displayText = level.charAt(0).toUpperCase() + level.slice(1);

  return (
    <div
      className={cn(
        'inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium border',
        styles.bg,
        styles.text,
        styles.border,
        styles.pulse,
        className
      )}
      title={`Puntuación de prioridad: ${score}/100`}
    >
      <span>{displayText}</span>
      {showScore && (
        <span className="font-bold">{score}</span>
      )}
    </div>
  );
};

export default PriorityBadge;
