Usage Meter

"use client";

import * as React from "react";

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

type UsageMeterProps = Omit<React.ComponentProps<"div">, "children"> & {
  value: number;
  max: number;
  label?: React.ReactNode;
  /** Format the value / max pair. Defaults to compact numbers. */
  format?: (value: number, max: number) => string;
  /** Percent thresholds that switch to warning / danger colours. */
  warnAt?: number;
  dangerAt?: number;
  size?: "sm" | "md";
  showPercent?: boolean;
};

const compact = new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 });

function defaultFormat(value: number, max: number) {
  return `${compact.format(value)} / ${compact.format(max)}`;
}

function UsageMeter({
  value,
  max,
  label,
  format = defaultFormat,
  warnAt = 80,
  dangerAt = 95,
  size = "md",
  showPercent = false,
  className,
  ...props
}: UsageMeterProps) {
  const pct = max > 0 ? Math.min(100, Math.max(0, (value / max) * 100)) : 0;
  const tone = pct >= dangerAt ? "danger" : pct >= warnAt ? "warn" : "ok";
  return (
    <div
      data-slot="usage-meter"
      data-tone={tone}
      role="meter"
      aria-valuemin={0}
      aria-valuemax={max}
      aria-valuenow={value}
      className={cn("flex w-full flex-col gap-1.5", className)}
      {...props}
    >
      {label !== undefined || showPercent ? (
        <div className="flex items-center justify-between gap-3 text-xs">
          <span className="truncate text-muted-foreground">{label}</span>
          <span className="shrink-0 font-mono tabular-nums text-foreground">
            {format(value, max)}
            {showPercent ? <span className="ml-1.5 text-muted-foreground">({Math.round(pct)}%)</span> : null}
          </span>
        </div>
      ) : null}
      <div className={cn("w-full overflow-hidden rounded-full bg-muted", size === "sm" ? "h-1" : "h-1.5")}>
        <div
          className={cn(
            "h-full rounded-full transition-[width] duration-500 ease-out",
            tone === "ok" && "bg-brand",
            tone === "warn" && "bg-amber-500",
            tone === "danger" && "bg-red-500",
          )}
          style={{ width: `${pct}%` }}
        />
      </div>
    </div>
  );
}

function UsageMeterGroup({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="usage-meter-group" className={cn("flex flex-col gap-4", className)} {...props} />;
}

export { UsageMeter, UsageMeterGroup };