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

type teamType = {
  image: string;
  name: string;
  role: string;
};

@Component({
  selector: 'app-team',
  imports: [RouterLink, CarouselModule],
  template: `
    <div class="about-team">
      <div class="container">
        <div class="row">
          <div class="col-lg-7 m-auto text-center">
            <div class="page-hadding">
              <h1>We have the expert team</h1>
              <div class="space16"></div>
              <p>
                Our team of experienced consultants combines industry knowledge,
                cutting-edge technology, and innovative strategies to guide you
                towards a brighter and greener future.
              </p>
            </div>
          </div>
        </div>
        <div class="space30"></div>
        <div class="row">
          <div class="slider-all ">
            <owl-carousel-o [options]="customOptions">
              @for(item of teamData;track $index){
              <ng-template carouselSlide>
                <div class="about-team-box ">
                  <div class="text-center _relative">
                    <div class="about-team-img img100">
                      <img [src]="item.image" alt="" />
                    </div>
                    <div class="page-hadding about-team-hadding">
                      <h4>
                        <a [routerLink]="[]">{{ item.name }}</a>
                      </h4>
                      <div class="space8"></div>
                      <p>{{ item.role }}</p>
                    </div>
                    <ul class="about-team-icons">
                      <li>
                        <a [routerLink]="[]"
                          ><i class="fa-brands fa-twitter"></i
                        ></a>
                      </li>
                      <li>
                        <a [routerLink]="[]"
                          ><i class="fa-brands fa-facebook-f"></i
                        ></a>
                      </li>
                      <li>
                        <a [routerLink]="[]"
                          ><i class="fa-brands fa-instagram"></i
                        ></a>
                      </li>
                    </ul>
                  </div>
                </div>
              </ng-template>
              }
            </owl-carousel-o>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: ``,
})
export class TeamComponent {
  teamData: teamType[] = [
    {
      image: 'assets/img/image/about-team1.png',
      name: 'Malisa Omanis',
      role: 'Manager',
    },
    {
      image: 'assets/img/image/about-team2.png',
      name: 'Marina Lamos',
      role: 'Senior Consultant',
    },
    {
      image: 'assets/img/image/about-team3.png',
      name: 'Malisa Omanis',
      role: 'Co-Funder',
    },
    {
      image: 'assets/img/image/about-team1.png',
      name: 'Anelina Moron',
      role: 'Business Specialist',
    },
    {
      image: 'assets/img/image/about-team1.png',
      name: 'Malisa Omanis',
      role: 'Manager',
    },
    {
      image: 'assets/img/image/about-team2.png',
      name: 'Marina Lamos',
      role: 'Senior Consultant',
    },
    {
      image: 'assets/img/image/about-team3.png',
      name: 'Malisa Omanis',
      role: 'Co-Funder',
    },
    {
      image: 'assets/img/image/about-team1.png',
      name: 'Anelina Moron',
      role: 'Business Specialist',
    },
    {
      image: 'assets/img/image/about-team2.png',
      name: 'Marina Lamos',
      role: 'Senior Consultant',
    },
  ];

  customOptions: OwlOptions = {
    loop: true,
    margin: 10,
    nav: false,
    dots: true,
    smartSpeed: 1000,
    responsive: {
      0: {
        items: 1,
      },
      900: {
        items: 4,
      },
    },
  };
}
