"use client";

import { cn } from "@/lib/utils";

export type UsageMeterProps = {
  label: string;
  used: number;
  limit: number;
  className?: string;
};

export function UsageMeter({ label, used, limit, className }: UsageMeterProps) {
  const isInfinity = !Number.isFinite(limit);
  const percent = isInfinity ? 0 : Math.min(1, used / Math.max(limit, 1));
  const tone =
    percent >= 1
      ? "bg-destructive"
      : percent >= 0.9
        ? "bg-amber-500"
        : percent >= 0.7
          ? "bg-amber-400"
          : "bg-primary";

  return (
    <div className={cn("flex flex-col gap-1", className)}>
      <div className="flex items-center justify-between text-xs">
        <span className="font-medium text-muted-foreground">{label}</span>
        <span className="text-muted-foreground tabular-nums">
          {used.toLocaleString()} / {isInfinity ? "∞" : limit.toLocaleString()}
        </span>
      </div>
      <div className="h-1.5 w-full overflow-hidden rounded-full bg-muted">
        <div
          className={cn("h-full rounded-full transition-[width]", tone)}
          style={{ width: `${(percent * 100).toFixed(1)}%` }}
        />
      </div>
    </div>
  );
}