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

type Counter = {
  value: number;
  label: string;
  suffix?: string;
  aosDuration: number;
};

@Component({
  selector: 'app-counter',
  host: { 'app-counter': 'app-counter7' },
  imports: [CountUpModule],
  template: `
    <div class="counter7">
      <div class="container">
        <div class="row">
          @for (item of counterData; track item) {
          <div class="col-lg-3 col-md-6">
            <div
              class=""
              [attr.data-aos]="'fade-up'"
              [attr.data-aos-duration]="item.aosDuration"
            >
              <div class="counter-box7 hadding7">
                <h1 class="font-f-7">
                  <span
                    class="counter"
                    [countUp]="item.value"
                    [options]="{ suffix: item.suffix || '' }"
                  ></span>
                </h1>
                <div class="space16"></div>
                <p>{{ item.label }}</p>
              </div>
            </div>
          </div>
          }
        </div>
      </div>
    </div>
  `,
  styles: ``,
})
export class CounterComponent {
  counterData: Counter[] = [
    {
      value: 400,
      label: 'Consulting Solution',
      suffix: '+',
      aosDuration: 700,
    },
    {
      value: 400,
      label: 'Consulting Solution',
      suffix: '+',
      aosDuration: 900,
    },
    {
      value: 400,
      label: 'Consulting Solution',
      suffix: '+',
      aosDuration: 700,
    },
    {
      value: 400,
      label: 'Consulting Solution',
      suffix: '+',
      aosDuration: 900,
    },
  ];
}
