import { jsxs, jsx } from 'react/jsx-runtime';
import { useEffect } from 'react';
import { useDraggable } from '../../../../../../../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.mjs';
import { GripVertical } from 'lucide-react';
import { cn } from '../../../../lib/utils.mjs';

const DraggableNewComponent = ({
  componentType,
  children,
  onDragStart,
  className
}) => {
  const {
    attributes,
    listeners,
    setNodeRef,
    setActivatorNodeRef,
    isDragging
  } = useDraggable({
    id: `new-component-${componentType}`,
    data: {
      type: "new-component",
      componentType
    }
  });
  useEffect(() => {
    if (isDragging && onDragStart) {
      onDragStart();
    }
  }, [isDragging, onDragStart]);
  return /* @__PURE__ */ jsxs(
    "div",
    {
      ref: setNodeRef,
      className: cn(
        "flex items-center gap-1",
        isDragging && "opacity-50",
        className
      ),
      ...attributes,
      children: [
        /* @__PURE__ */ jsx(
          "div",
          {
            ref: setActivatorNodeRef,
            ...listeners,
            className: 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__ */ jsx(GripVertical, { className: "h-4 w-4" })
          }
        ),
        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children })
      ]
    }
  );
};

export { DraggableNewComponent, DraggableNewComponent as default };
