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

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

@Component({
  selector: 'app-testimonial',
  host: { 'app-testimonial': 'app-testimonial1' },
  imports: [RouterLink, CarouselModule],
  template: `
     <div class="testimonial2 sp3" id="testimonial" style="background-color: #03163B;">
        <div class="container">
            <div class="row">
                <div class="col-lg-7 m-auto text-center">
                    <div class="hadding2-w">
                        <span class="span" data-aos-duration="700" data-aos="fade-up">Testimonials</span>
                        <div class="space16"></div>
                        <h1 data-aos-duration="900" data-aos="fade-up">Don’t Listen To Us, Listen To Our Great <span class="after2">Clients!</span></h1>     
                    </div>
                </div>
            </div>
            <div class="space30"></div>
            <div class="row" data-aos-duration="1000" data-aos="fade-up">   
                <owl-carousel-o [options]="customOptions" class="testimonial2-slider-all">
                  @for (items of testimonialData; track $index){
                    <ng-template carouselSlide >
                      <div class="testimonial-sliders">
                       <div class="testimonial-single-slider testimonial-single-slider2">
                        <div class="">
                            <div class="testimonial2-slider-img">
                                <img [src]="items.image" alt="">
                            </div>
                        </div>
                        <div class="testimonial1-hadding testimonial2-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 style="font-style: italic;">
                               {{items.des}} 
                            </p>
                            <div class="space20"></div>
                            <div class="slider1-bottom">
                              <h4>
                                <a [routerLink]="[]">{{items.name}} </a>
                              </h4>
                              <div class="space6"></div>
                              <p>
                                {{items.role}}
                              </p>
                            </div>
                          </div>
                       </div>
                       </div>
                    </ng-template>
                  }
                </owl-carousel-o>
            </div>
        </div>
     </div>
  `,
  styles: ``
})
export class TestimonialComponent {

  testimonialData: TestimonialType[] = [
    {
      rating : 5,
      image: 'assets/img/image/testimonial-slider1.png',
      des: `"Working with Advisor  the Consulting was a game changer for our business. Their strategic insights and guidance helped us double our revenue within a year."`,
      name: 'John Smith',
      role: 'CEO of XYZ Company'
    },
    {
      rating : 5,
      image: 'assets/img/image/testimonial-slider2.png',
      des: `"Working with Advisor  the Consulting was a game changer for our business. Their strategic insights and guidance helped us double our revenue within a year."`,
      name: 'John Smith',
      role: 'CEO of XYZ Company'
    },
    {
      rating : 5,
      image: 'assets/img/image/testimonial-slider1.png',
      des: `"Working with Advisor  the Consulting was a game changer for our business. Their strategic insights and guidance helped us double our revenue within a year."`,
      name: 'John Smith',
      role: 'CEO of XYZ Company'
    },
  ]

  customOptions: OwlOptions = {
    loop: true,
    margin: 10,
    nav: true,
    dots: false,
    autoplay: true,
    autoplayTimeout: 6000,
    smartSpeed: 2000,
    navSpeed: 600,
    navText: ['<i class="fa-solid fa-arrow-left"></i>', '<i class="fa-solid fa-arrow-right"></i>'],
    responsive: {
      0: {
        items: 1,
      },
      900: {
        items: 2,
      },
    }
  };


}
