import React from 'react';
import ReactFlow from 'react-flow-renderer';
import { PathFindingEdge } from '@tisoap/react-flow-smart-edge';

const elements = [
  {
    id: '1',
    data: { label: 'Node 1' },
    position: { x: 430, y: 0 },
  },
  {
    id: '2',
    data: { label: 'Node 2' },
    position: { x: 230, y: 90 },
  },
  {
    id: 'e12',
    source: '1',
    target: '2',
    type: 'smart',
  },
];

export const Graph = (props) => {
  const { children, ...rest } = props;

  return (
    <ReactFlow
      elements={elements}
      edgeTypes={{
        smart: PathFindingEdge,
      }}
      {...rest}
    >
      {children}
    </ReactFlow>
  );
};