"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

/**
 * One progress bar. There were six hand-rolled ones with four different
 * heights, while @radix-ui/react-progress sat installed and unimported.
 */
export function Progress({
  value,
  tone = "accent",
  size = "md",
  className,
  label,
}: {
  value: number; // 0..100
  tone?: "accent" | "ok" | "warn" | "err" | "art";
  size?: "sm" | "md";
  className?: string;
  label?: string;
}) {
  const pct = Math.max(0, Math.min(100, Number.isFinite(value) ? value : 0));
  return (
    <div
      role="progressbar"
      aria-valuenow={Math.round(pct)}
      aria-valuemin={0}
      aria-valuemax={100}
      aria-label={label}
      className={cn(
        "w-full overflow-hidden rounded-pill bg-[var(--surface-3)]",
        size === "sm" ? "h-1" : "h-1.5",
        className,
      )}
    >
      <div
        className={cn(
          "h-full rounded-pill transition-[width] duration-500 ease-out",
          { accent: "bg-accent", ok: "bg-ok", warn: "bg-warn", err: "bg-err", art: "bg-art" }[tone],
        )}
        style={{ width: `${pct}%` }}
      />
    </div>
  );
}