import { Component, Input, inject } from '@angular/core';
import { I18nService } from '../../core/i18n.service';

/** Barra de progreso global del día: "{hechas}/{total} listo ✨". */
@Component({
  selector: 'app-progress-bar',
  imports: [],
  template: `
    <div class="prog">
      <div class="prog__track">
        <div class="prog__fill" [style.width.%]="pct"></div>
      </div>
      <p class="prog__label">{{ done }}/{{ total }} {{ i18n.t('ready') }} ✨</p>
    </div>
  `,
  styles: [
    `
      .prog { display: flex; flex-direction: column; gap: 6px; }
      .prog__track {
        height: 16px;
        border-radius: var(--radius-pill);
        background: var(--surface-softer);
        overflow: hidden;
      }
      .prog__fill {
        height: 100%;
        border-radius: var(--radius-pill);
        background: linear-gradient(90deg, var(--accent-green), var(--accent-teal));
        transition: width 0.5s ease;
      }
      .prog__label {
        margin: 0;
        font-family: var(--font-display);
        font-weight: 600;
        color: var(--text-1);
      }
    `,
  ],
})
export class ProgressBarComponent {
  @Input() done = 0;
  @Input() total = 0;

  protected readonly i18n = inject(I18nService);

  get pct(): number {
    return this.total > 0 ? Math.round((this.done / this.total) * 100) : 0;
  }
}