'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const jsxRuntime = require('react/jsx-runtime');
const React = require('react');
const core_esm = require('../../../../../../../node_modules/.pnpm/@dnd-kit_core@6.3.1_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@dnd-kit/core/dist/core.esm.cjs');
const LucideIcons = require('lucide-react');
const utils = require('../../../../lib/utils.cjs');

const DraggableNewComponent = ({
  componentType,
  children,
  onDragStart,
  className
}) => {
  const {
    attributes,
    listeners,
    setNodeRef,
    setActivatorNodeRef,
    isDragging
  } = core_esm.useDraggable({
    id: `new-component-${componentType}`,
    data: {
      type: "new-component",
      componentType
    }
  });
  React.useEffect(() => {
    if (isDragging && onDragStart) {
      onDragStart();
    }
  }, [isDragging, onDragStart]);
  return /* @__PURE__ */ jsxRuntime.jsxs(
    "div",
    {
      ref: setNodeRef,
      className: utils.cn(
        "flex items-center gap-1",
        isDragging && "opacity-50",
        className
      ),
      ...attributes,
      children: [
        /* @__PURE__ */ jsxRuntime.jsx(
          "div",
          {
            ref: setActivatorNodeRef,
            ...listeners,
            className: utils.cn(
              "flex-shrink-0 cursor-grab active:cursor-grabbing p-1 -ml-1",
              "text-muted-foreground hover:text-foreground transition-colors",
              "rounded hover:bg-muted/50"
            ),
            "aria-label": `Drag ${componentType} to canvas`,
            children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.GripVertical, { className: "h-4 w-4" })
          }
        ),
        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children })
      ]
    }
  );
};

exports.DraggableNewComponent = DraggableNewComponent;
exports.default = DraggableNewComponent;
