'use client'

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

export const ServiceNode = memo(({ data, selected }: NodeProps) => {
  return (
    <div
      className={`px-3 py-2 rounded-lg border-2 ${
        selected
          ? 'border-yellow-400 bg-red-600/30'
          : 'border-red-500 bg-red-600/20'
      } min-w-[80px] 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-red-200 mt-1">Service</div>
      <Handle type="source" position={Position.Bottom} className="w-2 h-2" />
    </div>
  )
})

ServiceNode.displayName = 'ServiceNode'

