import { Handle, Position } from "react-flow-renderer";
import Draggable from "../../DragNDrop/Draggable";

type GenericNodeProps = {};

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

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

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

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

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

      <div className="generic-node-content">
        <label htmlFor="select">Выбери своего покемона: </label>
        <select className="nodrag">
          <option>Гена</option>
          <option>Чайка</option>
          <option>Бульбазавр</option>
        </select>
      </div>

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

const GenericNodeComponent = () => {
  return (
    <Draggable data={{ type: "generic" }}>
      <div className="node-component ">
        <div className="node-component-handle bg-red-700" />
        Тест
      </div>
    </Draggable>
  );
};

export { GenericNode, GenericNodeComponent };