import React from 'react';
interface StatusPillProps {
status: 'safe' | 'medium' | 'high' | 'critical';
className?: string;
}
const StatusPill: React.FC<StatusPillProps> = ({ status, className = '' }) => {
const getStatusConfig = (status: string) => {
switch (status) {
case 'safe':
return {
bgColor: 'bg-green-100',
textColor: 'text-green-800',
borderColor: 'border-green-200',
icon: '✅'
};
case 'medium':
return {
bgColor: 'bg-yellow-100',
textColor: 'text-yellow-800',
borderColor: 'border-yellow-200',
icon: '⚠️'
};
case 'high':
return {
bgColor: 'bg-orange-100',
textColor: 'text-orange-800',
borderColor: 'border-orange-200',
icon: '🚨'
};
case 'critical':
return {
bgColor: 'bg-red-100',
textColor: 'text-red-800',
borderColor: 'border-red-200',
icon: '🔥'
};
default:
return {
bgColor: 'bg-gray-100',
textColor: 'text-gray-800',
borderColor: 'border-gray-200',
icon: '❓'
};
}
};
const config = getStatusConfig(status);
return (
<span
className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${config.bgColor} ${config.textColor} ${config.borderColor} animate-pulse ${className}`}
>
<span className="mr-1">{config.icon}</span>
{status.charAt(0).toUpperCase() + status.slice(1)}
</span>
);
};
export default StatusPill;
