"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { cn } from "@open-mercato/shared/lib/utils";
import { Badge } from "@open-mercato/ui/primitives/badge";
import { Button } from "@open-mercato/ui/primitives/button";
import { Progress } from "@open-mercato/ui/primitives/progress";
const STEP_STYLES = {
  pending: "",
  active: "border-primary/40 bg-primary/10 text-primary",
  completed: "border-emerald-500/30 bg-emerald-500/10 text-emerald-200"
};
const STATUS_STYLES = {
  default: "border-border bg-background/80 text-foreground",
  info: "border-primary/20 bg-primary/5 text-primary",
  success: "border-emerald-500/20 bg-emerald-500/5 text-emerald-200",
  warning: "border-amber-500/20 bg-amber-500/5 text-amber-200",
  danger: "border-destructive/20 bg-destructive/5 text-destructive",
  muted: "border-zinc-500/20 bg-zinc-500/5 text-zinc-200"
};
function NextStepCallout({
  icon,
  title,
  description,
  steps,
  actionLabel,
  actionIcon,
  onAction,
  disabled = false,
  disabledMessage,
  busy = false,
  status,
  className
}) {
  return /* @__PURE__ */ jsx("div", { className: cn("rounded-xl border border-dashed border-primary/30 bg-primary/5 px-6 py-8", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-2xl flex-col items-center text-center", children: [
    icon ? /* @__PURE__ */ jsx("div", { className: "mb-4 flex h-14 w-14 items-center justify-center rounded-full border border-primary/30 bg-background text-primary", children: icon }) : null,
    /* @__PURE__ */ jsx("h4", { className: "text-lg font-semibold", children: title }),
    description ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: description }) : null,
    steps && steps.length > 0 ? /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap items-center justify-center gap-2", children: steps.map((step) => /* @__PURE__ */ jsx(
      Badge,
      {
        variant: "outline",
        className: cn(step.state ? STEP_STYLES[step.state] : STEP_STYLES.pending),
        children: step.label
      },
      step.id
    )) }) : null,
    /* @__PURE__ */ jsxs(
      Button,
      {
        type: "button",
        size: "lg",
        className: "mt-6 min-w-72",
        onClick: onAction,
        disabled: disabled || busy,
        children: [
          actionIcon,
          actionLabel
        ]
      }
    ),
    disabledMessage ? /* @__PURE__ */ jsx("p", { className: "mt-3 text-xs text-muted-foreground", children: disabledMessage }) : null,
    status ? /* @__PURE__ */ jsxs("div", { className: cn("mt-4 w-full rounded-lg border px-4 py-3 text-left", STATUS_STYLES[status.tone ?? "default"]), children: [
      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm font-medium", children: [
          status.icon ? /* @__PURE__ */ jsx("span", { className: "shrink-0", children: status.icon }) : null,
          /* @__PURE__ */ jsx("span", { children: status.label })
        ] }),
        status.badge ? status.badge : null
      ] }),
      typeof status.progressValue === "number" ? /* @__PURE__ */ jsx(Progress, { value: status.progressValue, className: "mt-3 h-2" }) : busy ? /* @__PURE__ */ jsx("div", { className: "mt-3 h-2 rounded-full bg-secondary" }) : null,
      status.progressDescription ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: status.progressDescription }) : null,
      status.errorMessage ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-destructive", children: status.errorMessage }) : null
    ] }) : null
  ] }) });
}
export {
  NextStepCallout
};
//# sourceMappingURL=NextStepCallout.js.map
