"use client";

import { withAlpha } from "./palette";

/**
 * ProgressBar — vertical or horizontal bar showing a percentage fill.
 * Used for compact status widgets, e.g. "Approval Pending: 62%".
 */
export function ProgressBar({
  label,
  value,
  total,
  color,
  unit = "",
}: {
  label: string;
  value: number;
  total: number;
  color: string;
  unit?: string;
}) {
  const pct = total === 0 ? 0 : Math.round((value / total) * 100);
  return (
    <div>
      <div className="flex items-center justify-between text-xs mb-1.5">
        <span className="font-medium truncate">{label}</span>
        <span className="text-muted-foreground tabular-nums shrink-0">
          <span className="font-semibold text-foreground">{value}</span>
          {unit ? ` ${unit}` : ""} · {pct}%
        </span>
      </div>
      <div
        className="h-2 w-full rounded-full overflow-hidden"
        style={{ background: withAlpha(color, 12) }}
      >
        <div
          className="h-full rounded-full"
          style={{
            width: `${pct}%`,
            background: `linear-gradient(90deg, ${color}, ${withAlpha(color, 60)})`,
            boxShadow: `0 0 8px ${withAlpha(color, 50)}`,
          }}
        />
      </div>
    </div>
  );
}