"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { Spinner } from "@open-mercato/ui/primitives/spinner";
function defaultFormatValue(value) {
  if (Math.abs(value) >= 1e6) {
    return `${(value / 1e6).toFixed(1)}M`;
  }
  if (Math.abs(value) >= 1e3) {
    return `${(value / 1e3).toFixed(1)}K`;
  }
  return value.toLocaleString(void 0, { maximumFractionDigits: 2 });
}
function formatPercentageChange(value) {
  const formatted = Math.abs(value).toFixed(1);
  return `${formatted}%`;
}
function BadgeDelta({ direction, value }) {
  const baseClasses = "inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium";
  const directionClasses = {
    up: "bg-status-success-bg text-status-success-text",
    down: "bg-status-error-bg text-status-error-text",
    unchanged: "bg-status-neutral-bg text-status-neutral-text"
  };
  const icons = {
    up: /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 10l7-7m0 0l7 7m-7-7v18" }) }),
    down: /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 14l-7 7m0 0l-7-7m7 7V3" }) }),
    unchanged: /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 12h14" }) })
  };
  return /* @__PURE__ */ jsxs(
    "span",
    {
      className: `${baseClasses} ${directionClasses[direction]}`,
      title: "Compared to previous period",
      children: [
        icons[direction],
        formatPercentageChange(value)
      ]
    }
  );
}
function KpiCard({
  title,
  value,
  trend,
  comparisonLabel,
  loading,
  error,
  formatValue = defaultFormatValue,
  prefix = "",
  suffix = "",
  className = "",
  headerAction
}) {
  const hasWrapper = !!title;
  const wrapperClass = hasWrapper ? `rounded-lg border bg-card p-4 ${className}` : className;
  const headerRow = title || headerAction ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 mb-2", children: [
    title && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-muted-foreground", children: title }),
    headerAction
  ] }) : null;
  if (error) {
    return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
      headerRow,
      /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error })
    ] });
  }
  if (loading) {
    return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
      headerRow,
      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ jsx(Spinner, { className: "h-6 w-6 text-muted-foreground" }) })
    ] });
  }
  if (value === null) {
    return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
      headerRow,
      /* @__PURE__ */ jsx("p", { className: "text-2xl sm:text-3xl font-semibold tracking-tight text-card-foreground", children: "--" })
    ] });
  }
  return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
    headerRow,
    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-3", children: [
      /* @__PURE__ */ jsxs("p", { className: "text-2xl sm:text-3xl font-semibold tracking-tight text-card-foreground", children: [
        prefix,
        formatValue(value),
        suffix
      ] }),
      trend && /* @__PURE__ */ jsx(BadgeDelta, { direction: trend.direction, value: trend.value })
    ] }),
    trend && comparisonLabel && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: comparisonLabel })
  ] });
}
var KpiCard_default = KpiCard;
export {
  KpiCard,
  KpiCard_default as default
};
//# sourceMappingURL=KpiCard.js.map
