'use client'

import { memo } from 'react'
import { Handle, Position, NodeProps } from 'reactflow'

export const TunnelNode = memo(({ data, selected }: NodeProps) => {
  return (
    <div
      className={`px-4 py-2 rounded-lg border-2 ${
        selected
          ? 'border-yellow-400 bg-purple-600/30'
          : 'border-purple-500 bg-purple-600/20'
      } min-w-[120px] text-center`}
    >
      <Handle type="target" position={Position.Left} className="w-3 h-3" />
      <div className="font-bold text-white text-sm">{data.label}</div>
      <div className="text-xs text-purple-200 mt-1">Tunnel</div>
      {data.metadata?.bandwidth && (
        <div className="text-xs text-purple-300 mt-1">{data.metadata.bandwidth}</div>
      )}
      <Handle type="source" position={Position.Right} className="w-3 h-3" />
    </div>
  )
})

TunnelNode.displayName = 'TunnelNode'

