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

type Testimonial = {
  icon: string;
  message: string;
  avatar: string;
  name: string;
  timeAgo: string;
  rating: number;
};

@Component({
  selector: 'app-testimonial',
  host: { 'app-testimonial': 'app-single-testimonial7' },
  imports: [RouterLink, CarouselModule],
  template: `
    <div class="tes7 sp3" id="testimonial">
      <div class="container">
        <div class="row">
          <div class="col-lg-6 m-auto text-center">
            <div class="hadding7">
              <h1 class="font-f-7" data-aos="fade-up" data-aos-duration="700">
                Trusted by Our Customers
              </h1>
              <div class="space16"></div>
              <p data-aos="fade-up" data-aos-duration="900">
                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 (testimonial of testimonials; track testimonial) {
              <ng-template carouselSlide>
                <div class="tes6-single-slider tes7-single-slider">
                  <div class="tes6-slider-icon">
                    <img [src]="testimonial.icon" alt="" />
                  </div>
                  <div class="space24"></div>
                  <p>{{ testimonial.message }}</p>

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

                  <div class="tes6-bottom-area">
                    <div class="tes6-bottom-hadding">
                      <div class="img50">
                        <img [src]="testimonial.avatar" alt="" />
                      </div>
                      <div class="tes6-hadding">
                        <h5>
                          <a [routerLink]="[]">{{ testimonial.name }}</a>
                        </h5>
                        <div class="space5"></div>
                        <p>{{ testimonial.timeAgo }}</p>
                      </div>
                    </div>

                    <div class="tes6-icons">
                      <ul>
                        @for (star of [].constructor(testimonial.rating); 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: Testimonial[] = [
    {
      icon: 'assets/img/icons/tes7-icon.svg',
      message: `"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."`,
      avatar: 'assets/img/image/tes6-img.png',
      name: 'Jhone Weak',
      timeAgo: '11 month ago',
      rating: 5,
    },
    {
      icon: 'assets/img/icons/tes7-icon.svg',
      message: `"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."`,
      avatar: 'assets/img/image/tes6-img.png',
      name: 'Virat Kohli',
      timeAgo: '11 month ago',
      rating: 5,
    },
    {
      icon: 'assets/img/icons/tes7-icon.svg',
      message: `"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."`,
      avatar: 'assets/img/image/tes6-img.png',
      name: 'Jhone Weak',
      timeAgo: '11 month ago',
      rating: 5,
    },
    {
      icon: 'assets/img/icons/tes7-icon.svg',
      message: `"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."`,
      avatar: 'assets/img/image/tes6-img.png',
      name: 'Virat Kohli',
      timeAgo: '11 month ago',
      rating: 5,
    },
    {
      icon: 'assets/img/icons/tes7-icon.svg',
      message: `"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."`,
      avatar: 'assets/img/image/tes6-img.png',
      name: 'Jhone Weak',
      timeAgo: '11 month ago',
      rating: 5,
    },
    {
      icon: 'assets/img/icons/tes7-icon.svg',
      message: `"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."`,
      avatar: 'assets/img/image/tes6-img.png',
      name: 'Virat Kohli',
      timeAgo: '11 month ago',
      rating: 5,
    },
  ];

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