interface ProgressBarProps {
  value: number;
  max?: number;
  label?: string;
}

export function ProgressBar({ value, max = 100, label }: ProgressBarProps) {
  const pct = Math.round((value / max) * 100);

  return (
    <div class="w-full">
      {label && (
        <div class="flex justify-between mb-1.5">
          <span class="text-xs" style={{ color: "var(--z-muted)" }}>{label}</span>
          <span class="text-xs font-mono" style={{ color: "var(--z-muted)" }}>{pct}%</span>
        </div>
      )}
      <div class="h-1.5 rounded-full overflow-hidden" style={{ background: "var(--z-card-bg)" }}>
        <div
          class="h-full rounded-full transition-all duration-500"
          style={{ width: `${pct}%`, background: "var(--z-accent)" }}
        />
      </div>
    </div>
  );
}
