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

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

@Component({
  selector: 'app-testimonial',
  host: { 'app-testimonial': 'app-single-testimonial5' },
  imports: [RouterLink, CarouselModule],
  template: `
    <div class="tes5 sp3" id="testimonial">
      <div class="container">
        <div class="row">
          <div class="col-lg-6 m-auto text-center">
            <div class="hadding5">
              <h1 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 to deliver legal advice suited
              </p>
            </div>
          </div>
        </div>
        <div class="space30"></div>

        <div class="row">
          <div class="tes5-slider" data-aos="fade-up" data-aos-duration="900">
            <owl-carousel-o [options]="customOptions">
              @for (item of testimonialData;track $index ){
              <ng-template carouselSlide>
                <div class="tes5-single-slider">
                  <div class="tes5-box">
                    <div class="tes-icon">
                      <img [src]="item.icon" alt="" />
                    </div>
                    <div class="space16"></div>
                    <ul class="tes5-icons">
                      @for (i of [].constructor(item.rating); track $index) {
                      <li>
                        <i class="fa-solid fa-star" ></i>
                      </li>
                      }
                    </ul>
                    <div class="space20"></div>
                    <p>
                      {{ item.des }}
                    </p>
                  </div>
                  <div class="space50"></div>
                  <div class="tes5-bottom-hadding text-center">
                    <div class="tes5-img img50">
                      <img [src]="item.image" alt="" />
                    </div>
                    <div class="space16"></div>
                    <h5>
                      <a [routerLink]="[]">{{ item.name }}</a>
                    </h5>
                    <div class="space10"></div>
                    <p>{{ item.role }}</p>
                  </div>
                </div>
              </ng-template>
              }
            </owl-carousel-o>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: ``,
})
export class TestimonialComponent {
  testimonialData: testimonialType[] = [
    {
      rating: 5,
      icon: 'assets/img/icons/tes5-icon.svg',
      des: 'After the divorce is finalized, you may to need support with enforcing court best a of finance orders, making modifications, or addressing post-divorce issues.',
      image: 'assets/img/image/tes5-img1.png',
      name: 'Rodrygo De Paul',
      role: 'CEO, Paul Ltd',
    },
    {
      rating: 5,
      icon: 'assets/img/icons/tes5-icon.svg',
      des: 'After the divorce is finalized, you may to need support with enforcing court best a of finance orders, making modifications, or addressing post-divorce issues.',
      image: 'assets/img/image/tes5-img1.png',
      name: 'Mac Allister',
      role: 'CEO, Paul Ltd',
    },
    {
      rating: 5,
      icon: 'assets/img/icons/tes5-icon.svg',
      des: 'After the divorce is finalized, you may to need support with enforcing court best a of finance orders, making modifications, or addressing post-divorce issues.',
      image: 'assets/img/image/tes5-img1.png',
      name: 'Payelo Dibala',
      role: 'CEO, Paul Ltd',
    },
    {
      rating: 5,
      icon: 'assets/img/icons/tes5-icon.svg',
      des: 'After the divorce is finalized, you may to need support with enforcing court best a of finance orders, making modifications, or addressing post-divorce issues.',
      image: 'assets/img/image/tes5-img1.png',
      name: 'Rodrygo De Paul',
      role: 'CEO, Paul Ltd',
    },
  ];

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