"use client";
import { jsxs, jsx } from 'react/jsx-runtime';
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 { cn } from '../../lib/utils.mjs';

function PaletteItem({ component }) {
  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
    id: `palette-${component.type}`,
    data: {
      type: "palette",
      componentType: component.type
    }
  });
  const Icon = component.icon;
  return /* @__PURE__ */ jsxs(
    "div",
    {
      ref: setNodeRef,
      ...listeners,
      ...attributes,
      className: cn(
        "flex items-center gap-3 p-3 rounded-lg border bg-card cursor-grab active:cursor-grabbing",
        "hover:bg-accent hover:border-accent-foreground/20 transition-colors",
        "touch-none select-none",
        isDragging && "opacity-50"
      ),
      children: [
        Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: component.label })
      ]
    }
  );
}
function Palette({ components, className }) {
  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), "data-testid": "form-builder-palette", children: [
    /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-muted-foreground mb-2", children: "Components" }),
    /* @__PURE__ */ jsx("div", { className: "flex flex-row flex-wrap lg:flex-col gap-2", children: components.map((component) => /* @__PURE__ */ jsx(PaletteItem, { component }, component.type)) })
  ] });
}
function PaletteDragOverlay({ component }) {
  if (!component) return null;
  const Icon = component.icon;
  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-3 rounded-lg border bg-card shadow-lg cursor-grabbing", children: [
    Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
    /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: component.label })
  ] });
}

export { Palette, PaletteDragOverlay };
