import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';

type TeamMember = {
  image: string;
  designation: string;
  name: string;
  aosDuration: string;
};

@Component({
  selector: 'app-team',
  imports: [RouterLink],
  template: `
    <div class="team7 sp3" id="team" style="background-color: #F4F3EF;">
      <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">
                Meet Our Attorneys
              </h1>
              <div class="space16"></div>
              <p data-aos="fade-up" data-aos-duration="900">
                Our team of highly experienced and dedicated attorneys is
                committed to providing top-notch legal representation. With a
                deep understanding of the law and a track record.
              </p>
            </div>
          </div>
        </div>

        <div class="space30"></div>
        <div class="row">
          @for (member of teamMembers; track member) {
          <div class="col-lg-3 col-md-6">
            <div
              class="team7-box text-center"
              data-aos="fade-left"
              [attr.data-aos-duration]="member.aosDuration"
            >
              <div class="team7-box-img img5 img100">
                <img [src]="member.image" alt="" />
              </div>
              <div class="space20"></div>
              <div class="hadding7">
                <p>{{ member.designation }}</p>
                <div class="space8"></div>
                <h4>
                  <a [routerLink]="[]" class="font-f-7">{{ member.name }}</a>
                </h4>

                <div class="space16"></div>

                <ul class="team7-icons">
                  <li>
                    <a [routerLink]="[]"
                      ><i class="fa-brands fa-instagram"></i
                    ></a>
                  </li>
                  <li>
                    <a [routerLink]="[]"
                      ><i class="fa-brands fa-facebook"></i
                    ></a>
                  </li>
                  <li>
                    <a [routerLink]="[]"
                      ><i class="fa-brands fa-twitter"></i
                    ></a>
                  </li>
                  <li>
                    <a [routerLink]="[]"
                      ><i class="fa-brands fa-linkedin-in"></i
                    ></a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          }
        </div>
      </div>
    </div>
  `,
  styles: ``,
})
export class TeamComponent {
  teamMembers: TeamMember[] = [
    {
      image: 'assets/img/image/team7-img1.png',
      designation: 'Senior Lawyer',
      name: 'Jone Barnsley',
      aosDuration: '700',
    },
    {
      image: 'assets/img/image/team7-img2.png',
      designation: 'Junior Atorney',
      name: 'Orlova Aleksey',
      aosDuration: '900',
    },
    {
      image: 'assets/img/image/team7-img3.png',
      designation: 'General Attorney',
      name: 'Jessica Hersey',
      aosDuration: '700',
    },
    {
      image: 'assets/img/image/team7-img4.png',
      designation: 'General Attorney',
      name: 'Jessica Hersey',
      aosDuration: '1200',
    },
  ];
}
