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

type OutputNodeProps = {};

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

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

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

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

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

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

      <label htmlFor="select">Выбери своего покемона: </label>
        <select className="nodrag">
          <option>Включить</option>
          <option>Выключить</option>
        </select>
      </div>

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

export default OutputNode;