import { Handle, Position } from 'reactflow';

function CustomNode({ data }) {
  const icon = data.icon || 'https://s3.dvirlabs.com/lab-icons/default.svg';

  return (
    <div style={{
      background: 'transparent',
      border: '2px solid #1976d2',
      borderRadius: 6,
      padding: 10,
      textAlign: 'center',
      width: 80,
      height: 40,
      boxShadow: '0 2px 6px rgba(0,0,0,0.2)',
      position: 'relative',
    }}>
      {/* Handles - חובה */}
      <Handle type="target" position={Position.Top} />
      <Handle type="source" position={Position.Bottom} />
      <Handle type="source" position={Position.Right} />
      <Handle type="source" position={Position.Left} />

      {/* Icon and label */}

      <img
        src={icon}
        alt={data.label}
        onError={(e) => {
          e.target.src = 'https://s3.dvirlabs.com/lab-icons/default.svg';
        }}
        style={{ width: 40, height: 40, marginBottom: 6 }}
      />
      <div style={{ fontWeight: 'bold' }}>{data.label}</div>
    </div>
  );
}

export default CustomNode;