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

type CounterItem = {
  count: number;
  duration: number;
  label: string;
};

@Component({
  selector: 'app-counter',
  host: { 'app-counter': 'app-counter5' },
  imports: [CountUpModule],
  template: `
    <div class="counter9" style="background-color: #2B2C32; padding: 60px 0;">
      <div class="container">
        <div class="row">
          @for(item of counterData;track $index){
          <div class="col-lg-3 col-md-6 text-center">
            <div class="" data-aos="fade-up" [attr.data-aos-duration]="item.duration">
              <div class="counter9-box hadding9">
                <h1 class="font-f-7">
                  <span [countUp]="item.count" [options]="{ suffix: '+' }"></span>
                </h1>
                <div class="space16"></div>
                <p>{{ item.label }}</p>
              </div>
            </div>
          </div>
          }
        </div>
      </div>
    </div>
  `,
  styles: ``,
})
export class CounterComponent {
  counterData: CounterItem[] = [
    {
      count: 400,
      duration: 700,
      label: 'Consulting Solution',
    },
    {
      count: 620,
      duration: 900,
      label: 'Complete Cases',
    },
    {
      count: 800,
      duration: 1100,
      label: 'Happy Customer',
    },
    {
      count: 120,
      duration: 800,
      label: 'Expert Consultant',
    },
  ];
}
