import { useEditor, useNode } from '@craftjs/core';
import React from 'react';

type DragItemProps = {
  children?: React.ReactNode;
  style?: React.CSSProperties;
};

export const DragItem: React.FC<DragItemProps> = ({ children, style }) => {
  const { preview } = useEditor((state) => ({
    preview: !state.options.enabled,
  }));

  const {
    connectors: { connect, drag },
  } = useNode();

  return preview ? (
    children
  ) : (
    <div style={style} ref={(dom) => connect(drag(dom as HTMLDivElement))}>{children}</div>
  );
};