interface StatusIndicatorProps {
  label: string
  status?: 'active' | 'warning' | 'error'
  className?: string
}

const statusColors = {
  active: 'bg-green-500',
  warning: 'bg-amber-500',
  error: 'bg-red-500',
}

export default function StatusIndicator({ label, status = 'active', className = '' }: StatusIndicatorProps) {
  return (
    <div className={`inline-flex items-center gap-2 ${className}`}>
      <span className="relative flex h-2.5 w-2.5">
        <span className={`animate-ping absolute inline-flex h-full w-full rounded-full ${statusColors[status]} opacity-75`} />
        <span className={`relative inline-flex rounded-full h-2.5 w-2.5 ${statusColors[status]}`} />
      </span>
      <span className="font-mono text-xs text-white/50">{label}</span>
    </div>
  )
}
