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 testimonialImgType = {
  class: string;
  position: string;
  duration: number;
  image: string;
}

@Component({
  selector: 'app-testimonial',
  host: { 'app-testimonial': 'app-testimonial2' },
  imports: [ RouterLink,CarouselModule],
  template: `
     <div class="testimonial1 sp3" 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(items of testimonialimgData;track $index){
                <div [class]="items.class" [attr.data-aos]="items.position" [attr.data-aos-duration]="items.duration">
                  <img [src]="items.image" alt="">
                </div>
               }
              </div>
            </div>

            <div class="col-lg-7">
           <div class="trusred-slider-all">
              <owl-carousel-o [options]="carouselOptions">
                @for(items of testimonialData;track $index ){
                  <ng-template carouselSlide>
                    <div class="testimonial1-hadding">
                  <div class="testimonial-stars">
                    <ul>
                       @for (i of [].constructor(items.rating); track $index) {
                       <li><i class="fa-solid fa-star"></i></li>
                        }        
                    </ul>
                  </div>
                  <p>
                   {{items.des}} 
                  </p>
                  <div class="space24"></div>
                  <div class="slider1-bottom">
                    <h4>
                      <a [routerLink]="[]">{{items.name}} </a>
                    </h4>
                    <div class="space8"></div>
                    <p>
                      {{items.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'
    },
  ]

testimonialimgData: testimonialImgType[] = [
    {
      class: 'testimonial1-img2',
      position: 'fade-up-left',
      duration: 700,
      image: 'assets/img/image/testimonial1-img1.png'
    },
    {
      class: 'testimonial1-img3',
      position: 'fade-up-right',
      duration: 700,
      image: 'assets/img/image/testimonial1-img2.png'
    },
    {
      class: 'testimonial1-img4',
      position: 'fade-down-right',
      duration: 700,
      image: 'assets/img/image/testimonial1-img3.png'
    },
    {
      class: 'testimonial1-img5',
      position: 'fade-down-left',
      duration: 700,
      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>'
  ]
}; 

}
