resolutionflow/frontend/src/components/network/ui/node-status-indicator.tsx

import type { ReactNode } from 'react'
import { cn } from '@/lib/utils'

export type NodeStatus = 'online' | 'offline' | 'degraded' | 'unknown'

const STATUS_BORDER_COLORS: Record<NodeStatus, string> = {
  online: 'border-emerald-400',
  offline: 'border-red-400',
  degraded: 'border-yellow-400',
  unknown: '',
}

const STATUS_GLOW: Record<NodeStatus, string> = {
  online: 'shadow-[0_0_6px_rgba(52,211,153,0.15)]',
  offline: 'shadow-[0_0_6px_rgba(248,113,113,0.15)]',
  degraded: 'shadow-[0_0_6px_rgba(250,204,21,0.15)]',
  unknown: '',
}

interface NodeStatusIndicatorProps {
  status?: NodeStatus
  children: ReactNode
  className?: string
}

export function NodeStatusIndicator({ status = 'unknown', children, className }: NodeStatusIndicatorProps) {
  if (status === 'unknown') {
    return <>{children}</>
  }

  return (
    <div
      className={cn(
        'w-full h-full rounded-lg border-2 transition-colors',
        STATUS_BORDER_COLORS[status],
        STATUS_GLOW[status],
        className,
      )}
    >
      {children}
    </div>
  )
}