"use client";
'use strict';

const jsxRuntime = require('react/jsx-runtime');
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 utils = require('../../lib/utils.cjs');

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

exports.Palette = Palette;
exports.PaletteDragOverlay = PaletteDragOverlay;
