import { Handle, Position } from "react-flow-renderer";
import {
  bottomBigStyle,
  bottomSmallStyle,
  topDoubleLeftStyle,
  topDoubleRightStyle,
} from "../styles";

type MathNodeProps = {};

const MathNode = (props: MathNodeProps) => {
  return (
    <div className="math-node node-layout">
      <Handle
        style={topDoubleLeftStyle}
        id="in-a"
        type="target"
        position={Position.Top}
      />
      <Handle
        style={topDoubleRightStyle}
        id="in-b"
        type="target"
        position={Position.Top}
      />

      <div className="node-header">
        <span className="node-title">Математика</span>
      </div>

      <div className="node-content">
        <select className="node-content-select nodrag">
          <option>+</option>
          <option>-</option>
          <option>*</option>
          <option>/</option>
          <option>√</option>
          <option>**</option>
        </select>
      </div>

      <Handle
        style={bottomSmallStyle}
        type="source"
        position={Position.Bottom}
      />
    </div>
  );
};

export default MathNode;