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

export function Progress({
  value,
  className,
  tone = "brand"
}: {
  value: number;
  className?: string;
  tone?: "brand" | "warning" | "danger";
}) {
  const pct = clampPercent(value);
  const barTone =
    tone === "danger" ? "bg-red-500" : tone === "warning" ? "bg-amber-500" : "bg-brand-600";

  return (
    <div
      className={cn("h-2 w-full overflow-hidden rounded-full bg-ink-100", className)}
      role="progressbar"
      aria-valuenow={pct}
      aria-valuemin={0}
      aria-valuemax={100}
    >
      <div className={cn("h-full rounded-full transition-all", barTone)} style={{ width: `${pct}%` }} />
    </div>
  );
}