import { jsxs, jsx } from "react/jsx-runtime";
import { tcv, tcx, MdRender } from "@choiceform/design-system";
import { FieldTypeSingleSelect } from "@choiceform/icons-react";
import { memo } from "react";
import { t } from "../../../../i18n/index.js";
const PlanningMessageTv = tcv({
  slots: {
    root: "before:bg-secondary-background relative flex flex-col gap-2 pl-6 before:absolute before:top-8 before:bottom-0 before:left-2 before:w-0.5 before:content-['']",
    icon: "text-icon-secondary absolute top-0.25 left-0 flex size-5 items-center justify-center",
    title: "text-secondary-foreground text-message"
  }
});
const MessagePlanning = memo(function MessagePlanning2(props) {
  const { children, className } = props;
  const planningTitle = t("response", "planning-title");
  const content = typeof children === "string" ? children : "";
  const tv = PlanningMessageTv();
  return /* @__PURE__ */ jsxs("div", { className: tcx(tv.root(), className), children: [
    /* @__PURE__ */ jsx("div", { className: tv.icon(), children: /* @__PURE__ */ jsx(FieldTypeSingleSelect, {}) }),
    /* @__PURE__ */ jsx("p", { className: tv.title(), children: planningTitle }),
    content && /* @__PURE__ */ jsx(MdRender, { content })
  ] });
});
export {
  MessagePlanning
};
//# sourceMappingURL=message-planning.js.map
