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

type countDataType = {
  count: number;
  suffix: string;
  title: string;
};

@Component({
  selector: 'app-counter',
  host: { 'app-counter': 'app-counter9' },
  imports: [RouterLink, CountUpModule],
  template: `
    <div class="about-counter sp3" style="background-color: #03163B;">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-6">
            <div class="page-hadding-w about1-hadding">
              <h1>
                One Of The Fastest Way To <br />
                Gain Business Success
              </h1>
              <div class="space24"></div>
              <p>
                At Advisor Consulting Company, we are a trusted business
                consulting firm dedicated to helping businesses thrive and reach
                their full potential.Our team of experienced consultants brings
                diverse industry
              </p>
              <div class="space20"></div>
              <p>
                knowledge and expertise in various business disciplines.We
                prioritize understanding your unique challenges and goals to
                deliver customized solutions tailored to your specific needs
              </p>
              <div class="space40"></div>
              <a [routerLink]="[]" class="comon-button2">More About Us</a>
            </div>
          </div>

          <div class="col-lg-6">
            <div class="counter-box-all _relative">
              <div class="row">
                @for(item of countData;track $index){
                <div class="col-lg-6 col-sm-6 align-items-center">
                  <div class="counter-about-box text-center">
                    <div class="">
                      <h1>
                        <span
                          class="counter"
                          [countUp]="item.count"
                          [options]="{ suffix: item.suffix }"
                        ></span>
                      </h1>
                      <p>{{ item.title }}</p>
                    </div>
                  </div>
                </div>
                }
              </div>
              <div
                class="about-counter-shap aniamtion-key-1"
                style="position: absolute; top: 50px; right: 100px;"
              >
                <img src="assets/img/shapes/counter-shape.svg" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: ``,
})
export class CounterComponent {

  countData: countDataType[] = [
    {
      count: 90,
      suffix: '%',
      title: 'Satisfied Customer',
    },
    {
      count: 23,
      suffix: 'k+',
      title: 'Projects Success Rate',
    },
    {
      count: 42,
      suffix: 'k+',
      title: 'Employers Work All Over World',
    },
    {
      count: 514,
      suffix: '+',
      title: 'Projects Complete',
    },
  ];
  
}
