'use client'

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

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

DatacenterNode.displayName = 'DatacenterNode'

