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

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

@Component({
  selector: 'app-testimonial',
  host: { 'app-testimonial': 'app-testimonial3' },
  imports: [RouterLink, CarouselModule],
  template: `
     <div class="testimonial3 sp3" id="testimonial" style="background-color: #333982;">
        <div class="container">
            <div class="row">
                <div class="col-lg-7 m-auto text-center">
                    <div class="hadding3-w">
                        <h1 data-aos="fade-up" data-aos-duration="700" >Our Testimonials, Don't just take our word for it!</h1>
                    </div>
                </div>
            </div>
            <div class="space70"></div>
            <div class="row align-items-center">
                <div class="col-lg-5">
                    <div class="testimonial3-img" data-aos="flip-left" data-aos-duration="700">
                        <img src="assets/img/image/testimonial3-img.png" alt="">
                    </div>
                </div>
                <div class="col-lg-7">
                    <div class="testimonial3-slider-all">
                        <owl-carousel-o [options]="customOptions" class="testimonial3-slider">
                          @for(item of testimonialData;track $index){
                            <ng-template carouselSlide >
                              <div class="testimonial3-single-slider">
                                <div class="testimonial3-hadding">
                                    <div class="testimonial-stars testimonial3-stars">
                                      <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="space30"></div>
                                    <div class="slider3-bottom-all">
                                        <div class="slider3-bottom">
                                            <h4>
                                              <a [routerLink]="[]">{{item.name}} </a>
                                            </h4>
                                            <p>
                                              {{item.role}}
                                            </p>
                                          </div>
                                    </div>
                                  </div>
                                </div>
                            </ng-template>
                          } 
                        </owl-carousel-o>
                    </div>
                </div>
            </div>
        </div>
      </div>
  `,
  styles: ``
})
export class TestimonialComponent {

  testimonialData: testimonialType[] = [
    {
      rating: 5,
      name: 'John Smith',
      role: 'CEO of XYZ Company',
      des: `"Professional,reliable,and thorough.Toxa Consulting guided us through complex tax matters with ease.A true partner Download our comprehensive guides and ebooks on tax planning, deductions, and compliance to enhance your understanding of tax-related matters, A true partner! Download our comprehensive guides and ebooks on tax planning."`,
    },
    {
      rating: 5,
      name: 'John Smith',
      role: 'CEO of XYZ Company',
      des: `"Professional,reliable,and thorough.Toxa Consulting guided us through complex tax matters with ease.A true partner Download our comprehensive guides and ebooks on tax planning, deductions, and compliance to enhance your understanding of tax-related matters, A true partner! Download our comprehensive guides and ebooks on tax planning."`,
    },
    {
      rating: 5,
      name: 'John Smith',
      role: 'CEO of XYZ Company',
      des: `"Professional,reliable,and thorough.Toxa Consulting guided us through complex tax matters with ease.A true partner Download our comprehensive guides and ebooks on tax planning, deductions, and compliance to enhance your understanding of tax-related matters, A true partner! Download our comprehensive guides and ebooks on tax planning."`,
    },
  ]

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


}
