src/components/clean/shared/CleanProgressBar.tsx

"use client";

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

// =============================================================================
// CleanProgressBar — Thin black-on-gray progress bar
// =============================================================================

export interface CleanProgressBarProps {
  value: number; // 0–100
  max?: number;
  label?: string;
  showPercent?: boolean;
  size?: "sm" | "md";
  variant?: "default" | "success";
  className?: string;
}

export function CleanProgressBar({
  value,
  max = 100,
  label,
  showPercent = false,
  size = "sm",
  variant = "default",
  className,
}: CleanProgressBarProps) {
  const pct = Math.min(100, Math.max(0, (value / max) * 100));

  return (
    <div className={cn("flex flex-col gap-1.5", className)}>
      {(label || showPercent) && (
        <div className="flex items-center justify-between">
          {label && <span className="text-[12px] font-medium text-[#6B7280]">{label}</span>}
          {showPercent && (
            <span className="text-[12px] font-semibold text-[#111] tabular-nums">{Math.round(pct)}%</span>
          )}
        </div>
      )}
      <div
        className={cn(
          "w-full overflow-hidden rounded-full bg-[#E5E7EB]",
          size === "sm" ? "h-1.5" : "h-2.5",
        )}
        role="progressbar"
        aria-valuenow={value}
        aria-valuemin={0}
        aria-valuemax={max}
      >
        <div
          className={cn(
            "h-full rounded-full transition-all duration-500 ease-out",
            variant === "success" ? "bg-[#059669]" : "bg-[#111111]",
          )}
          style={{ width: `${pct}%` }}
        />
      </div>
    </div>
  );
}