import { useXShape, XShapeStage, URLImage, createRootMachine } from 'xshape';

// url is optional
// data format see: https://github.com/tony40508/xshape/blob/main/public/mockData.json
const rootMachine = createRootMachine('initial-shape-data-url');

function App() {
  const {
    componentProps,
    // other props see: https://github.com/tony40508/xshape/blob/main/src/App.tsx
  } = useXShape(rootMachine);

  return (
    <XShapeStage
      {...componentProps}
      // enable to configure finish condition in limited options
      // see: https://github.com/tony40508/xshape/blob/main/src/utils/types.d.ts
      handleMouseDown={(e) => {
        componentProps.handleMouseDown(e, 'ctrl+click');
      }}
    >
      {/* URLImage is optional */}
      <URLImage url="background-image-url" />
    </XShapeStage>
  );
}