import { Component, input } from '@angular/core';

/** Atom: native progress bar for an in-flight upload. Pure UI — the caller supplies
    the percentage. */
@Component({
  selector: 'app-upload-progress-bar',
  styles: [`
    :host { display: flex; align-items: center; gap: var(--rhc-space-max-md); }
    progress { flex: 1; height: var(--rhc-space-max-md); }
    .pct { font-size: var(--rhc-text-font-size-sm); color: var(--rhc-color-foreground-subtle); min-width: 3ch; text-align: end; }
  `],
  template: `
    <progress
      max="100"
      [value]="progressPct()"
      [attr.aria-label]="progressLabel"></progress>
    <span class="pct">{{ progressPct() }}%</span>
  `,
})
export class UploadProgressBarComponent {
  progressPct = input.required<number>();

  protected readonly progressLabel = $localize`:@@upload.progress.label:Uploadvoortgang`;
}