import { jsx, Fragment } from "react/jsx-runtime";
import "react";
import { u as useSortable } from "../../sortable.esm-CQM3vY1X.js";
import { C as CSS } from "../../core.esm-Ce6wsWiy.js";
import { c as cn } from "../../cn-FAaWYZ6x.js";
import { Card } from "../card/card.js";
const KanbanCard = ({
  id,
  name,
  children,
  className,
  onClick
}) => {
  const {
    attributes,
    listeners,
    setNodeRef,
    transition,
    transform,
    isDragging
  } = useSortable({
    id
  });
  const style = {
    transition,
    transform: CSS.Transform.toString(transform)
  };
  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { style, ...attributes, ref: setNodeRef, children: /* @__PURE__ */ jsx(
    Card,
    {
      className: cn(
        "cursor-grab rounded-lg p-3 border-0 shadow-sm hover:shadow-md transition-shadow duration-200",
        isDragging && "pointer-events-none cursor-grabbing opacity-50",
        onClick && "cursor-pointer",
        className
      ),
      ...listeners,
      onClick,
      children: children ?? /* @__PURE__ */ jsx("p", { className: "m-0 font-medium", children: name })
    }
  ) }) });
};
export {
  KanbanCard
};
