"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { BILLING_REGISTRY } from "@nextsparkjs/registries/billing-registry";
import { UsageBar } from "./UsageBar.js";
import { Card, CardContent, CardHeader, CardTitle } from "../ui/card.js";
import { useTranslations } from "next-intl";
function UsageDashboard({ className }) {
  const t = useTranslations("billing");
  const limits = Object.entries(BILLING_REGISTRY.limits);
  return /* @__PURE__ */ jsxs(Card, { className, "data-cy": "usage-dashboard", children: [
    /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: t("usage.title") }) }),
    /* @__PURE__ */ jsxs(CardContent, { className: "space-y-6", "data-cy": "usage-dashboard-limits", children: [
      limits.map(([slug, limit]) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", "data-cy": `usage-dashboard-limit-${slug}`, children: [
        /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium", children: t(`limits.${slug}`) }),
        /* @__PURE__ */ jsx(UsageBar, { limitSlug: slug, showLabel: true })
      ] }, slug)),
      limits.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground text-center py-8", children: t("usage.noLimits") || "No usage limits configured" })
    ] })
  ] });
}
export {
  UsageDashboard
};
