import styles from "./Node.module.css";
import { Handle, Position } from "react-flow-renderer";

type MathNodeProps = {};

const MathNode = (props: MathNodeProps) => {
  return (
    // Базовый класс generic-node - прописана ширина и положение, цвет текста и фона

    // Nandle - ручка для коннекта. Можно задать оформление при помощи className, тип (target / source) и позицию

    // Label - подпись ноды. Можно стилизовать

    // Select - DropDown меню, можно стилизовать. Стоит класс nodrag для предотвращения залипания

    <div className="math-node">
      <Handle className="" type="target" position={Position.Top} />

      <div className="generic-node-content">

        <input> первое число</input>
        <select className="nodrag">
          <option>+</option>
          <option>-</option>
          <option>*</option>
          <option>/</option>
          <option>корень из</option>
          <option>возвести в степень</option>
        </select>
        <input> второе число</input>
      </div>

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

export default MathNode;