"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { ArrowDownRight, ArrowUpRight, Minus } from "lucide-react";
import { useT } from "@open-mercato/shared/lib/i18n/context";
function MetricCard({ title, value, subtitle, trend, loading }) {
  return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border bg-card px-5 py-4", children: [
    /* @__PURE__ */ jsx("div", { className: "text-overline font-semibold uppercase tracking-[0.12em] text-muted-foreground", children: title }),
    /* @__PURE__ */ jsx("div", { className: "mt-3 text-3xl font-semibold tracking-tight text-foreground", children: loading ? "..." : value.toLocaleString() }),
    trend ? /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-2", children: [
      /* @__PURE__ */ jsxs(
        "span",
        {
          className: [
            "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium",
            trend.direction === "up" ? "bg-status-success-bg text-status-success-text" : trend.direction === "down" ? "bg-destructive/10 text-destructive" : "bg-muted text-muted-foreground"
          ].join(" "),
          children: [
            trend.direction === "up" ? /* @__PURE__ */ jsx(ArrowUpRight, { className: "size-3" }) : null,
            trend.direction === "down" ? /* @__PURE__ */ jsx(ArrowDownRight, { className: "size-3" }) : null,
            trend.direction === "unchanged" ? /* @__PURE__ */ jsx(Minus, { className: "size-3" }) : null,
            trend.value > 0 ? "+" : "",
            trend.value
          ]
        }
      ),
      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: subtitle })
    ] }) : /* @__PURE__ */ jsx("div", { className: "mt-2 text-xs text-muted-foreground", children: subtitle })
  ] });
}
function ChangelogKpiCards({
  loading = false,
  totalCount,
  todayCount,
  yesterdayCount,
  uniqueUsers,
  criticalFieldCount,
  criticalFieldLabel,
  dateRangeDays
}) {
  const t = useT();
  const trendValue = todayCount - yesterdayCount;
  const trendDirection = trendValue > 0 ? "up" : trendValue < 0 ? "down" : "unchanged";
  return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4", children: [
    /* @__PURE__ */ jsx(
      MetricCard,
      {
        loading,
        title: t("customers.changelog.kpi.totalChanges", "All changes"),
        value: totalCount,
        subtitle: t("customers.changelog.kpi.period", "last {{days}} days", { days: dateRangeDays })
      }
    ),
    /* @__PURE__ */ jsx(
      MetricCard,
      {
        loading,
        title: t("customers.changelog.kpi.today", "Today"),
        value: todayCount,
        subtitle: t("customers.changelog.kpi.vsYesterday", "vs yesterday"),
        trend: { value: trendValue, direction: trendDirection }
      }
    ),
    /* @__PURE__ */ jsx(
      MetricCard,
      {
        loading,
        title: t("customers.changelog.kpi.users", "Users"),
        value: uniqueUsers,
        subtitle: t("customers.changelog.kpi.active", "active")
      }
    ),
    /* @__PURE__ */ jsx(
      MetricCard,
      {
        loading,
        title: t("customers.changelog.kpi.criticalFields", "Critical fields"),
        value: criticalFieldCount,
        subtitle: criticalFieldLabel
      }
    )
  ] });
}
var ChangelogKpiCards_default = ChangelogKpiCards;
export {
  ChangelogKpiCards,
  ChangelogKpiCards_default as default
};
//# sourceMappingURL=ChangelogKpiCards.js.map
