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`;
}