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

type testimonialType = {
  id:number,
  icon: string;
  content: string;
  authorImg: string;
  authorName: string;
  date: string;
  stars: number;
};

@Component({
  selector: 'app-testimonial',
  host: { 'app-testimonial': 'app-single-testimonial6' },
  imports: [RouterLink, CarouselModule],
  template: `
    <div class="tes6 sp3" id="testimonial" style="background-color: #ECF5F6;">
      <div class="container">
        <div class="row">
          <div class="col-lg-6 m-auto text-center">
            <div class="hadding6">
              <h1 data-aos="fade-up" data-aos-duration="800">
                Trusted by Our Customers
              </h1>
              <div class="space16"></div>
              <p data-aos="fade-up" data-aos-duration="1000">
                At Equity, we provide personalized and effective solutions for a
                wide range of legal needs.We are getting strength from our
                clients.
              </p>
            </div>
          </div>
        </div>
        <div class="space60"></div>
        <div class="row">
          <div
            class="tes6-slider-all"
            data-aos="fade-up"
            data-aos-duration="1000"
          >
            <owl-carousel-o [options]="customOptions">
              @for (item of testimonials; track item.id) {
              <ng-template carouselSlide>
                <div class="tes6-single-slider" >
                  <div class="tes6-slider-icon">
                    <img [src]="item.icon" alt="" />
                  </div>
                  <div class="space24"></div>
                  <p>{{ item.content }}</p>

                  <div class="tes6-border"></div>

                  <div class="tes6-bottom-area">
                    <div class="tes6-bottom-hadding">
                      <div class="img50">
                        <img [src]="item.authorImg" alt="" />
                      </div>
                      <div class="tes6-hadding">
                        <h5>
                          <a [routerLink]="[]">{{ item.authorName }}</a>
                        </h5>
                        <div class="space5"></div>
                        <p>{{ item.date }}</p>
                      </div>
                    </div>

                    <div class="tes6-icons">
                      <ul>
                        @for (star of [].constructor(item.stars); track $index) {
                        <li><i class="fa-solid fa-star"></i></li>
                        }
                      </ul>
                    </div>
                  </div>
                </div>
              </ng-template>
              }
            </owl-carousel-o>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: ``,
})
export class TestimonialComponent {
  testimonials: testimonialType[] = [
    {
       id: 1,
      icon: 'assets/img/icons/tes6-icon.svg',
      content:
        '"Engaging in collaboration with the Consultant has been incredibly inspiring. Their team consistently go above & beyond, offering exceptional service best and achieving impressive service results.',
      authorImg: 'assets/img/image/tes6-img.png',
      authorName: 'Jhone Weak',
      date: '11 month ago',
      stars: 5,
    },
    {
       id: 2,
      icon: 'assets/img/icons/tes6-icon.svg',
      content:
        '"Engaging in collaboration with the Consultant has been incredibly inspiring. Their team consistently go above & beyond, offering exceptional service best and achieving impressive service results.',
      authorImg: 'assets/img/image/tes6-img.png',
      authorName: 'Virat Kohli',
      date: '11 month ago',
      stars: 5,
    },
    {
       id: 3,
      icon: 'assets/img/icons/tes6-icon.svg',
      content:
        '"Engaging in collaboration with the Consultant has been incredibly inspiring. Their team consistently go above & beyond, offering exceptional service best and achieving impressive service results.',
      authorImg: 'assets/img/image/tes6-img.png',
      authorName: 'Jhone Weak',
      date: '11 month ago',
      stars: 5,
    },
    {
       id: 4,
      icon: 'assets/img/icons/tes6-icon.svg',
      content:
        '"Engaging in collaboration with the Consultant has been incredibly inspiring. Their team consistently go above & beyond, offering exceptional service best and achieving impressive service results.',
      authorImg: 'assets/img/image/tes6-img.png',
      authorName: 'Virat Kohli',
      date: '11 month ago',
      stars: 5,
    },
    {
       id: 5,
      icon: 'assets/img/icons/tes6-icon.svg',
      content:
        '"Engaging in collaboration with the Consultant has been incredibly inspiring. Their team consistently go above & beyond, offering exceptional service best and achieving impressive service results.',
      authorImg: 'assets/img/image/tes6-img.png',
      authorName: 'Jhone Weak',
      date: '11 month ago',
      stars: 5,
    },
    {
       id: 6,
      icon: 'assets/img/icons/tes6-icon.svg',
      content:
        '"Engaging in collaboration with the Consultant has been incredibly inspiring. Their team consistently go above & beyond, offering exceptional service best and achieving impressive service results.',
      authorImg: 'assets/img/image/tes6-img.png',
      authorName: 'Virat Kohli',
      date: '11 month ago',
      stars: 5,
    },
  ];

  customOptions: OwlOptions = {
    loop: true,
    margin: 10,
    nav: true,
    dots: true,
    smartSpeed: 1000,
    navText: [
      '<i class="fa-solid fa-angle-left"></i>',
      '<i class="fa-solid fa-angle-right"></i>',
    ],
    responsive: {
      0: {
        items: 1,
      },
      900: {
        items: 2,
      },
    },
  };
}
