import {memo, type FC, type CSSProperties} from 'react';
import {Handle, Position, type NodeProps} from '@reactflow/core';

const sourceHandleStyleA: CSSProperties = {left: 50};
const sourceHandleStyleB: CSSProperties = {
    right: 50,
    left: 'auto',
};

const OperationNode: FC<NodeProps> = ({data, xPos, yPos}) => {
    return (
        <>
            <Handle type="target" position={Position.Bottom}/>
            <div>
                <div>
                    Тип: <strong>{data.label}</strong>
                </div>
                <div>
                    Схема:{' '}
                    <strong>
                        {xPos.toFixed(2)},{yPos.toFixed(2)}
                    </strong>
                </div>
            </div>

            <Handle
                type="source"
                position={Position.Top}
                id="a"
                style={sourceHandleStyleA}
            />
            <Handle
                type="source"
                position={Position.Top}
                id="b"
                style={sourceHandleStyleB}
            />
        </>
    );
};

export default memo(OperationNode);