"use client";

import { Progress } from "@/components/ui/progress";
import { useLanguage } from "@/lib/i18n/context";

/**
 * Reusable "N of M used" display with a progress bar, for future pages that
 * track real consumption (AI generations, saved products, etc.). Not wired
 * into any page yet — Phase 4 has no consuming feature to report real
 * numbers for, and this component only renders whatever it's given, so it
 * never fabricates usage.
 */
export function UsageLimitDisplay({
  used,
  limit,
  featureLabel,
}: {
  used: number;
  limit: number;
  featureLabel: string;
}) {
  const { t } = useLanguage();
  const percent = limit > 0 ? Math.min(100, Math.round((used / limit) * 100)) : 0;

  return (
    <div className="flex flex-col gap-1.5">
      <p className="text-xs text-muted-foreground">
        {t.billing.usage.used
          .replace("{used}", String(used))
          .replace("{limit}", String(limit))
          .replace("{feature}", featureLabel)}
      </p>
      <Progress value={percent} />
    </div>
  );
}