import { Component, Input, OnInit, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-budget-progress',
  standalone: true,
  templateUrl: './budget-progress.component.html',
  styleUrls: ['./budget-progress.component.scss']
})
export class BudgetProgressComponent implements OnInit {
  @Input() total: number = 0;
  @Input() spent: number = 0;
  @Input() remaining: number = 0;
  @Input() percentage: number = 0;
  
  @ViewChild('progressBar', { static: true }) progressBar!: ElementRef;

  ngOnInit(): void {
    setTimeout(() => {
      this.progressBar.nativeElement.style.width = `${this.percentage}%`;
    }, 500);
  }
}