"use client";

import { cn } from "@aur-ui/ui/lib/utils";
import { Progress as ProgressPrimitive } from "radix-ui";
import type * as React from "react";

const TONES = {
  brand: "bg-brand",
  positive: "bg-positive",
  warning: "bg-warning",
  danger: "bg-danger",
} as const;

/**
 * Progress bar — ink-wash track, semantic-tone fill, smooth width easing.
 * Omit `value` for the indeterminate sweep (loading of unknown length).
 */
function Progress({
  className,
  value,
  tone = "brand",
  size = "default",
  ...props
}: React.ComponentProps<typeof ProgressPrimitive.Root> & {
  tone?: keyof typeof TONES;
  size?: "sm" | "default";
}) {
  const indeterminate = value === undefined || value === null;

  return (
    <ProgressPrimitive.Root
      data-slot="progress"
      value={indeterminate ? undefined : value}
      className={cn(
        "relative w-full overflow-hidden rounded-full bg-ink-wash",
        size === "sm" ? "h-1" : "h-1.5",
        className,
      )}
      {...props}
    >
      <ProgressPrimitive.Indicator
        data-slot="progress-indicator"
        className={cn(
          "h-full rounded-full",
          TONES[tone],
          indeterminate
            ? "progress-indeterminate w-1/3"
            : "transition-[width] duration-500 ease-out",
        )}
        style={indeterminate ? undefined : { width: `${value ?? 0}%` }}
      />
    </ProgressPrimitive.Root>
  );
}

export { Progress };