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

type projectType = {
  image: string;
  title: string;
  des: string;
};

@Component({
  selector: 'app-projects',
  imports: [RouterLink],
  template: `
    <div class="case-studies">
      <div class="container">
        <div class="row">
          <div class="col-lg-8 m-auto text-center">
            <div class="hadding1">
              <h1>Related Projects</h1>
              <div class="space24"></div>
              <p>
                Consulting service is a key part of the future of energy. It can
                help you save money on your electricity bill, and it can also
                help to reduce your carbon footprint.
              </p>
            </div>
          </div>
        </div>
        <div class="space30"></div>
        <div class="row">
          @for(item of projectData;track $index){
          <div class="col-lg-6">
            <div class="space30"></div>
            <div class="case-box-all">
              <div class="case-box-img case-box-img-page img100">
                <img [src]="item.image" alt="" />
              </div>
              <div class="case-box-after case-box-after-page">
                <div class="case-box-hover">
                  <div class="case-hover-hadding">
                    <h4>
                      <a [routerLink]="[]">{{ item.title }}</a>
                    </h4>
                    <div class="space14"></div>
                    <div class="hover-block">
                      <p>
                        {{ item.des }}
                      </p>
                      <div class="space24"></div>
                      <div class="case-hover-icon2">
                        <a [routerLink]="[]"
                          ><i class="fa-solid fa-arrow-right"></i
                        ></a>
                      </div>
                    </div>
                  </div>
                  <div class="case-hover-icon">
                    <a [routerLink]="[]"
                      ><i class="fa-solid fa-arrow-right"></i
                    ></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          }
        </div>
      </div>
    </div>
  `,
  styles: ``,
})

export class ProjectsComponent {
  projectData: projectType[] = [
    {
      image: 'assets/img/image/case1-img1.png',
      title: 'Financial Investment',
      des: 'Describe the HR challenges faced by the client and how your the solutions helped them achieve significant',
    },
    {
      image: 'assets/img/image/case1-img2.png',
      title: 'HR Consulting',
      des: 'Describe the HR challenges faced by the client and how your the solutions helped them achieve significant',
    },
  ];
}
