// Визуальный прогресс-бар чанковой операции (бронь и снятие). Общий компонент, чтобы обе
// операции показывали прогресс одинаково (DRY) — раньше прогресс брони был только текстом в кнопке.

type ChunkProgressProps = {
  /** Подпись операции, напр. «Бронирование» / «Снятие брони». */
  label: string;
  /** Сколько элементов обработано. */
  done: number;
  /** Всего элементов в операции. */
  total: number;
};

export function ChunkProgress({ label, done, total }: ChunkProgressProps) {
  const pct = total > 0 ? Math.min(100, Math.round((done / total) * 100)) : 0;
  return (
    <div
      className="tgu-chunk-progress"
      role="progressbar"
      aria-valuenow={done}
      aria-valuemin={0}
      aria-valuemax={total}
      aria-label={label}
    >
      <div className="tgu-chunk-progress__head">
        <span>{label}…</span>
        <span className="tgu-chunk-progress__count">
          {done}/{total}
        </span>
      </div>
      <div className="tgu-chunk-progress__track">
        <div className="tgu-chunk-progress__fill" style={{ width: `${pct}%` }} />
      </div>
    </div>
  );
}
