'use client'

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

export const VMNode = memo(({ data, selected }: NodeProps) => {
  return (
    <div
      className={`px-4 py-2 rounded-lg border-2 ${
        selected
          ? 'border-yellow-400 bg-orange-600/30'
          : 'border-orange-500 bg-orange-600/20'
      } min-w-[100px] text-center`}
    >
      <Handle type="target" position={Position.Top} className="w-2 h-2" />
      <div className="font-semibold text-white text-xs">{data.label}</div>
      <div className="text-xs text-orange-200 mt-1">VM</div>
      {data.metadata?.ip && (
        <div className="text-xs text-orange-300 mt-1 font-mono">{data.metadata.ip}</div>
      )}
      <Handle type="source" position={Position.Bottom} className="w-2 h-2" />
    </div>
  )
})

VMNode.displayName = 'VMNode'

