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

type TestimonialItem = {
  icon: string;
  stars: number;
  message: string;
  userImage: string;
  name: string;
  designation: string;
};

@Component({
  selector: 'app-testimonial',
  host: { 'app-testimonial': 'app-single-testimonial9' },
  imports: [RouterLink, CarouselModule],
  template: `
    <div class="tes9 sp3" id="testimonial" style="background: #2B2C32;">
      <div class="container">
        <div class="row">
          <div class="col-lg-6 m-auto text-center">
            <div class="hadding9">
              <h1 data-aos="fade-up" data-aos-duration="700">
                Some love words from clients
              </h1>
            </div>
          </div>
        </div>

        <div class="space60"></div>
        <div class="row">
          <div
            class="tes8-parent-slider"
            data-aos="fade-up"
            data-aos-duration="900"
          >
            <owl-carousel-o [options]="customOptions">
              @for (item of testimonialsData; track item) {
              <ng-template carouselSlide>
                <div class="tes8-single-slider">
                  <div class="tes8-slider-box">
                    <div class="tes8-icon">
                      <img [src]="item.icon" alt="" />
                    </div>
                    <div class="space16"></div>
                    <ul class="tes8-stars">
                      @for (star of [].constructor(item.stars);track $index) {
                      <li><i class="fa-solid fa-star"></i></li>
                      }
                    </ul>
                    <div class="space20"></div>
                    <p>{{ item.message }}</p>
                    <div class="tes8-border"></div>
                    <div class="tes8-bottom">
                      <div class="tes8-bottom-img">
                        <img [src]="item.userImage" alt="" />
                      </div>
                      <div class="tes8-bottom-hadding">
                        <h5>
                          <a [routerLink]="[]">{{ item.name }}</a>
                        </h5>
                        <div class="space5"></div>
                        <p>{{ item.designation }}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </ng-template>
              }
            </owl-carousel-o>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: ``,
})
export class TestimonialComponent {
  testimonialsData: TestimonialItem[] = [
    {
      icon: 'assets/img/icons/tes9-icon.svg',
      stars: 5,
      message:
        '“Business Consultant to legal entity filing, the marketing setup, automation, on the legal bookkeeping, technology, in person of an networking, online sales, permits and user console consult.”',
      userImage: 'assets/img/image/tes8-img1.png',
      name: 'Tina Wilkinson',
      designation: 'CEO, Wingree Ltd',
    },
    {
      icon: 'assets/img/icons/tes9-icon.svg',
      stars: 5,
      message:
        '“Business Consultant to legal entity filing, the marketing setup, automation, on the legal bookkeeping, technology, in person of an networking, online sales, permits and user console consult.”',
      userImage: 'assets/img/image/tes8-img2.png',
      name: 'Leslie Alexander',
      designation: 'CEO, Marquis Ltd',
    },
    {
      icon: 'assets/img/icons/tes9-icon.svg',
      stars: 5,
      message:
        '“Business Consultant to legal entity filing, the marketing setup, automation, on the legal bookkeeping, technology, in person of an networking, online sales, permits and user console consult.”',
      userImage: 'assets/img/image/tes8-img3.png',
      name: 'Maurice Quitzon',
      designation: 'CEO, Parkview Int',
    },
    {
      icon: 'assets/img/icons/tes9-icon.svg',
      stars: 5,
      message:
        '“Business Consultant to legal entity filing, the marketing setup, automation, on the legal bookkeeping, technology, in person of an networking, online sales, permits and user console consult.”',
      userImage: 'assets/img/image/tes8-img1.png',
      name: 'Tina Wilkinson',
      designation: 'CEO, Wingree Ltd',
    },
    {
      icon: 'assets/img/icons/tes9-icon.svg',
      stars: 5,
      message:
        '“Business Consultant to legal entity filing, the marketing setup, automation, on the legal bookkeeping, technology, in person of an networking, online sales, permits and user console consult.”',
      userImage: 'assets/img/image/tes8-img2.png',
      name: 'Leslie Alexander',
      designation: 'CEO, Marquis Ltd',
    },
    {
      icon: 'assets/img/icons/tes9-icon.svg',
      stars: 5,
      message:
        '“Business Consultant to legal entity filing, the marketing setup, automation, on the legal bookkeeping, technology, in person of an networking, online sales, permits and user console consult.”',
      userImage: 'assets/img/image/tes8-img3.png',
      name: 'Maurice Quitzon',
      designation: 'CEO, Parkview Int',
    },
    {
      icon: 'assets/img/icons/tes9-icon.svg',
      stars: 5,
      message:
        '“Business Consultant to legal entity filing, the marketing setup, automation, on the legal bookkeeping, technology, in person of an networking, online sales, permits and user console consult.”',
      userImage: 'assets/img/image/tes8-img1.png',
      name: 'Tina Wilkinson',
      designation: 'CEO, Wingree Ltd',
    },
    {
      icon: 'assets/img/icons/tes9-icon.svg',
      stars: 5,
      message:
        '“Business Consultant to legal entity filing, the marketing setup, automation, on the legal bookkeeping, technology, in person of an networking, online sales, permits and user console consult.”',
      userImage: 'assets/img/image/tes8-img2.png',
      name: 'Leslie Alexander',
      designation: 'CEO, Marquis Ltd',
    },
    {
      icon: 'assets/img/icons/tes9-icon.svg',
      stars: 5,
      message:
        '“Business Consultant to legal entity filing, the marketing setup, automation, on the legal bookkeeping, technology, in person of an networking, online sales, permits and user console consult.”',
      userImage: 'assets/img/image/tes8-img3.png',
      name: 'Maurice Quitzon',
      designation: 'CEO, Parkview Int',
    },
  ];

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