"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useQuota } from "../../hooks/useQuota";
import { useTranslations } from "next-intl";
import { cn } from "../../lib/utils";
import { Skeleton } from "../ui/skeleton";
function UsageBar({ limitSlug, showLabel = true, className }) {
  const quota = useQuota(limitSlug);
  const t = useTranslations("billing.usage");
  if (quota.isLoading) {
    return /* @__PURE__ */ jsxs("div", { className: cn("space-y-1", className), "data-cy": "usage-bar-loading", children: [
      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }),
      showLabel && /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-24" })
    ] });
  }
  if (!quota || quota.max === void 0) {
    return null;
  }
  const current = quota.current ?? 0;
  const max = quota.max;
  const isUnlimited = max === -1;
  const percentUsed = isUnlimited ? 0 : Math.min(Math.round(current / max * 100), 100);
  const colorVariant = percentUsed >= 90 ? "destructive" : percentUsed >= 75 ? "warning" : "default";
  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-1", className), "data-cy": `usage-bar-${limitSlug}`, children: [
    showLabel && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm text-muted-foreground", "data-cy": "usage-bar-label", children: [
      /* @__PURE__ */ jsx("span", { children: isUnlimited ? t("unlimited") : t("usedOf", { current, max }) }),
      !isUnlimited && /* @__PURE__ */ jsx("span", { "data-cy": "usage-bar-percent", children: t("percentUsed", { percent: percentUsed }) })
    ] }),
    /* @__PURE__ */ jsx("div", { className: "relative h-2 w-full overflow-hidden rounded-full bg-secondary", "data-cy": "usage-bar-progress", children: /* @__PURE__ */ jsx(
      "div",
      {
        className: cn(
          "h-full transition-all",
          colorVariant === "destructive" && "bg-destructive",
          colorVariant === "warning" && "bg-yellow-500",
          colorVariant === "default" && "bg-primary"
        ),
        style: { width: `${percentUsed}%` }
      }
    ) })
  ] });
}
export {
  UsageBar
};
