import React from 'react';
import { Badge } from '../../ui';
import { AlertTriangle, Info, AlertCircle, XCircle } from 'lucide-react';

interface SeverityBadgeProps {
  severity: 'low' | 'medium' | 'high' | 'critical';
  showIcon?: boolean;
}

export const SeverityBadge: React.FC<SeverityBadgeProps> = ({ severity, showIcon = true }) => {
  const config = {
    low: {
      label: 'Bajo',
      color: 'gray' as const,
      icon: Info,
    },
    medium: {
      label: 'Medio',
      color: 'blue' as const,
      icon: AlertCircle,
    },
    high: {
      label: 'Alto',
      color: 'orange' as const,
      icon: AlertTriangle,
    },
    critical: {
      label: 'Crítico',
      color: 'red' as const,
      icon: XCircle,
    },
  };

  const { label, color, icon: Icon } = config[severity];

  return (
    <Badge color={color}>
      {showIcon && <Icon className="mr-1 h-3 w-3" />}
      {label}
    </Badge>
  );
};
