'use client';

import { Handle, Position } from '@xyflow/react';

interface PortRowProps {
  label: string;
  handleId: string;
  dotColor?: string;
}

export function PortRow({ label, handleId, dotColor = '#29b6f6' }: PortRowProps) {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        width: '100%',
        padding: '4px 8px',
        borderTop: '1px solid #f5f5f5',
        position: 'relative',
      }}
    >
      <span
        style={{
          fontSize: 11,
          color: '#555',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap',
          maxWidth: 170,
        }}
      >
        {label}
      </span>
      <Handle
        type="source"
        position={Position.Right}
        id={handleId}
        style={{
          width: 8,
          height: 8,
          background: dotColor,
          border: 'none',
          right: -4,
          position: 'absolute',
          top: '50%',
          transform: 'translateY(-50%)',
        }}
      />
    </div>
  );
}
