import React from 'react';
import { Button } from '@arco-design/web-react';
import { IconPlus } from '@arco-design/web-react/icon';

interface EdgeAddNodeButtonProps {
  onClick: (e) => void;
  style?: React.CSSProperties;
}

const EdgeAddNodeButton: React.FC<EdgeAddNodeButtonProps> = ({
                                                               onClick,
                                                               style
                                                             }) => {
  return (
    <div
      style={{
        position: 'absolute',
        transform: 'translate(-50%, -50%)',
        pointerEvents: 'all',
        ...style
      }}
      className="nodrag nopan"
    >
      <Button
        size="mini"
        icon={<IconPlus />}
        onClick={(e) => {
          e.stopPropagation();
          onClick(e);
        }}
        style={{
          width: 12,
          height: 12,
          minWidth: 12,
          padding: 0,
          borderRadius: '50%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: '#1890ff', // 使用项目主题蓝色
          borderColor: '#1890ff',
          color: '#ffffff',
          transition: 'transform 0.2s ease' // 添加过渡动画
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.transform = 'scale(1.5)';
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.transform = 'scale(1)';
        }}
      />
    </div>
  );
};

export default EdgeAddNodeButton;