import { Progress } from "@/components/ui/progress";

type UsageMetric = {
  label: string;
  used: number;
  limit: number | null;
  unit?: string;
  unlimitedLabel: string;
};

function UsageBar({ label, used, limit, unit, unlimitedLabel }: UsageMetric) {
  const pct = limit === null ? 0 : Math.min(100, (used / Math.max(limit, 1)) * 100);
  return (
    <div className="space-y-1.5">
      <div className="flex justify-between text-sm">
        <span className="text-muted-foreground">{label}</span>
        <span className="font-medium tabular-nums">
          {used}
          {unit} / {limit === null ? unlimitedLabel : `${limit}${unit ?? ""}`}
        </span>
      </div>
      {limit !== null && <Progress value={pct} />}
    </div>
  );
}

export function UsageQuotaSection({ metrics }: { metrics: UsageMetric[] }) {
  return (
    <div className="space-y-4">
      {metrics.map((m) => (
        <UsageBar key={m.label} {...m} />
      ))}
    </div>
  );
}