import { jsxs, jsx } from "react/jsx-runtime";
import { tcv, tcx, Button } from "@choiceform/design-system";
import { memo, useState } from "react";
import { t } from "../../../../i18n/index.js";
const MessageConfirmationTv = tcv({
  slots: {
    root: "confirmation-message flex flex-col gap-2 rounded-lg border p-2",
    description: "mb-2",
    actions: "flex gap-4",
    responded: "text-secondary-foreground"
  }
});
const MessageConfirmation = memo(function MessageConfirmation2(props) {
  const { children, className, onConfirm } = props;
  const [responded, setResponded] = useState(false);
  const handleResponse = (confirmed) => {
    setResponded(true);
    onConfirm?.(confirmed);
  };
  const confirmationConfirm = t("common", "confirm");
  const confirmationCancel = t("common", "cancel");
  const confirmationResponded = t("response", "confirmation-responded");
  const tv = MessageConfirmationTv();
  return /* @__PURE__ */ jsxs("div", { className: tcx(tv.root(), className), children: [
    /* @__PURE__ */ jsx("div", { className: tv.description(), children }),
    !responded && /* @__PURE__ */ jsxs("div", { className: tv.actions(), children: [
      /* @__PURE__ */ jsx(Button, { onClick: () => handleResponse(true), children: confirmationConfirm }),
      /* @__PURE__ */ jsx(
        Button,
        {
          variant: "secondary",
          onClick: () => handleResponse(false),
          children: confirmationCancel
        }
      )
    ] }),
    responded && /* @__PURE__ */ jsx("div", { className: tv.responded(), children: confirmationResponded })
  ] });
});
export {
  MessageConfirmation
};
//# sourceMappingURL=message-confirmation.js.map
