import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { CarouselModule, OwlOptions } from 'ngx-owl-carousel-o';

type testimonialType = {
  rating: number;
  des: string;
  name: string;
  role: string;
}

type testimonialImageType = {
  class: string;
  position: string;
  image: string;
}

@Component({
  selector: 'app-testimonial',
  host: { 'app-testimonial': 'app-testimonial4' },
  imports: [CarouselModule,RouterLink],
  template: `
      <div class="testimonial1 testimonial4 sp4" id="testimonial">
            <div class="container">
              <div class="row align-items-center">
                <div class="col-lg-5">
                  <div class="testimonial1-image-all text-center">
                    <div class="testimonial1-img1">
                      <img src="assets/img/shapes/testimonial-shape.svg" alt="">
                    </div>
                    @for(item of testimonialImage;track $index){
                     <div [class]="item.class" [attr.data-aos]="item.position" data-aos-duration="700">
                      <img [src]="item.image" alt="">
                    </div>
                    }
                  </div>
                </div>
    
                <div class="col-md-7">
                  <div class="trusred-slider-all">
                  <owl-carousel-o [options]="carouselOptions" >
                    @for(item of testimonialData;track $index){
                      <ng-template carouselSlide>
                      <div class="testimonial1-hadding">
                      <div class="testimonial-stars testimonial-stars3">
                        <ul>
                          @for (i of [].constructor(item.rating); track $index) {
                             <li><i class="fa-solid fa-star"></i></li>
                          }
                        </ul>
                      </div>
                      <p>
                       {{item.des}}
                      </p>
                      <div class="space24"></div>
                      <div class="slider1-bottom">
                        <h4>
                          <a [routerLink]="[]">{{item.name}} </a>
                        </h4>
                        <div class="sapce6"></div>
                        <p>
                          {{item.role}}
                        </p>
                      </div>
                    </div>
                     </ng-template>
                    }
                  </owl-carousel-o>
                  </div>
                </div>
              </div>
            </div>
          </div>
  `,
  styles: ``
})
export class TestimonialComponent {

  testimonialData: testimonialType[] = [
    {
      rating: 5,
      des: `“Professional, knowledgeable, and results-driven. Advisor  the Consulting guided us through a complex organizational change, ensuring a smooth transition and positive employee engagement." . Their strategic insights and guidance helped us double our revenue within a year."`,
      name: 'John Smith',
      role: 'CEO of XYZ Company'
    },
    {
      rating: 5,
      des: `“Professional, knowledgeable, and results-driven. Advisor  the Consulting guided us through a complex organizational change, ensuring a smooth transition and positive employee engagement." . Their strategic insights and guidance helped us double our revenue within a year."`,
      name: 'John Smith',
      role: 'CEO of XYZ Company'
    },
    {
      rating: 5,
      des: `“Professional, knowledgeable, and results-driven. Advisor  the Consulting guided us through a complex organizational change, ensuring a smooth transition and positive employee engagement." . Their strategic insights and guidance helped us double our revenue within a year."`,
      name: 'John Smith',
      role: 'CEO of XYZ Company'
    },
  ]

  testimonialImage: testimonialImageType[] = [
    {
      class: 'testimonial1-img2',
      position: 'fade-up-left',
      image: 'assets/img/image/testimonial1-img1.png'
    },
    {
      class: 'testimonial1-img3',
      position: 'fade-up-right',
      image: 'assets/img/image/testimonial1-img2.png'
    },
    {
      class: 'testimonial1-img4',
      position: 'fade-down-right',
      image: 'assets/img/image/testimonial1-img3.png'
    },
    {
      class: 'testimonial1-img5',
      position: 'fade-down-left',
      image: 'assets/img/image/testimonial1-img4.png'
    },
  ]

  carouselOptions: OwlOptions = {
    loop: true,
    nav: true,
    dots: false,
    items: 1,
    autoplay: true,
    autoplayTimeout: 5000,
    smartSpeed: 1000,
    navText: ['<i class="fa-solid fa-arrow-left"></i>', '<i class="fa-solid fa-arrow-right"></i>'],
  }

}
