import { Component } from '@angular/core';
import { CountUpModule } from 'ngx-countup';

type counterType = {
  count: number;
  suffix?: string;
  duration: number;
  title: string;
}

@Component({
  selector: 'app-counter',
  host: { 'app-counter': 'app-counter2' },
  imports: [CountUpModule],
  template: `
     <div class="counter1" style="background-color: #03163B; padding: 80px 0">
        <div class="container">
          <div class="row">

           @for(items of counterData; track $index){
            <div class="col-lg-3 col-sm-6 col-6">
              <div class="counter1-hadding" data-aos="zoom-out" [attr.data-aos-duration]="items.duration">
                <div class="counter-hadding-h">
                  <h1><span class="counter" [countUp]="items.count" [options]="{ suffix : items.suffix ? items.suffix :''}"></span></h1>
                </div>
                <div class="counter-hadding-p">
                  <p [innerHTML]="items.title"></p>
                </div>
              </div>         
             </div>
           }
          </div>
        </div>
        <div class="counter1-bg-img aniamtion-key-1">
          <img src="assets/img/shapes/counter-shape.svg" alt="">
        </div>
      </div>
  `,
  styles: ``
})

export class CounterComponent {

  counterData:counterType[] = [
    {
      count: 90,
      suffix: '%',
      duration: 900,
      title: 'Projects <br>  Success Rate'
    },
    {
      count: 255,
      duration: 700,
      title: 'Number of <br> installations'
    },
    {
      count: 50,
      suffix: 'k+',
      duration: 800,
      title: 'Total CO2 <br>  Offset (Tons)'
    },
    {
      count: 255,
      duration: 700,
      title: 'Number of <br> installations'
    },
  ]

}
