import { jsxs, jsx } from "react/jsx-runtime";
import { tcx, IconButton } from "@choiceform/design-system";
import { BinSmall, Forward } from "@choiceform/icons-react";
import { memo, useRef } from "react";
import { t } from "../../../../../i18n/index.js";
import { queueItemVariants } from "../tv.js";
const QueueItem = memo(function QueueItem2(props) {
  const {
    message,
    isDragging = false,
    isBeingDragged = false,
    onDragStart,
    onRemove,
    onJumpQueue
  } = props;
  const itemRef = useRef(null);
  const tv = queueItemVariants({
    isBeingDragged,
    isDragging
  });
  const jumpQueue = t("prompt-input", "jump-queue");
  const remove = t("prompt-input", "remove-from-queue");
  const handleMouseDown = (e) => {
    onDragStart(e);
  };
  return /* @__PURE__ */ jsxs(
    "div",
    {
      ref: itemRef,
      className: tcx(tv.root()),
      children: [
        /* @__PURE__ */ jsxs(
          "div",
          {
            className: tv.dragContext(),
            onMouseDown: handleMouseDown,
            children: [
              /* @__PURE__ */ jsx("div", { className: tv.icon(), children: /* @__PURE__ */ jsx("div", { className: tv.queueIcon() }) }),
              /* @__PURE__ */ jsx("p", { className: tv.text(), children: message.content })
            ]
          }
        ),
        /* @__PURE__ */ jsxs("div", { className: tv.actions(), children: [
          /* @__PURE__ */ jsx(
            IconButton,
            {
              variant: "ghost",
              onClick: onRemove,
              tooltip: {
                content: remove
              },
              children: /* @__PURE__ */ jsx(BinSmall, {})
            }
          ),
          onJumpQueue && /* @__PURE__ */ jsx(
            IconButton,
            {
              variant: "ghost",
              onClick: onJumpQueue,
              tooltip: {
                content: jumpQueue
              },
              children: /* @__PURE__ */ jsx(Forward, {})
            }
          )
        ] })
      ]
    }
  );
});
export {
  QueueItem
};
//# sourceMappingURL=queue-item.js.map
