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

type CaseStudy = {
  image: string;
  title: string;
  link: string;
  duration: number;
};

@Component({
  selector: 'app-case-study',
  host: { 'app-case-study': 'app-case-study4' },
  imports: [RouterLink],
  template: `
    <div class="case6 sp3" id="case" style="background-color: #1E1E1E;">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-6">
            <div class="hadding9">
              <h1 data-aos="fade-left" data-aos-duration="700">
                Featured Case Studies
              </h1>
              <div class="space16"></div>
              <p data-aos="fade-left" data-aos-duration="900">
                Consulting service is a key part of the future of energy. It can
                help you save electricity bill, and it can also help to reduce
                your carbon footprint.
              </p>
            </div>
          </div>
          <div class="col-lg-6">
            <div
              class="case9-button"
              data-aos="fade-right"
              data-aos-duration="800"
            >
              <a routerLink="/case" class="theme-btn12"
                >View Full Projects<span
                  ><i class="fa-solid fa-arrow-right"></i></span
              ></a>
            </div>
          </div>
        </div>

        <div class="space30"></div>
        <div class="row">
          @for (item of caseStudies; track item) {
          <div class="col-lg-4 col-md-6">
            <div
              class="case6-box"
              [attr.data-aos]="'fade-up'"
              [attr.data-aos-duration]="item.duration"
            >
              <div class="case6-img-box img100 img5">
                <img [src]="item.image" alt="" />
              </div>
              <div class="case9-hadding-area">
                <h5>
                  <a [routerLink]="item.link">{{ item.title }}</a>
                </h5>
                <div class="space20"></div>
                <a [routerLink]="item.link" class="service9-learn">
                  Read More <span><i class="fa-solid fa-arrow-right"></i></span>
                </a>
              </div>
            </div>
          </div>
          }
        </div>
      </div>
    </div>
  `,
  styles: ``,
})
export class CaseStudyComponent {
  caseStudies: CaseStudy[] = [
    {
      image: 'assets/img/image/case6-img1.png',
      title: 'Managements Employee Handbook Development for Company Growth',
      link: '/case-details1',
      duration: 700,
    },
    {
      image: 'assets/img/image/case6-img2.png',
      title: 'Business Strategic Employee Trust Handbook for Company Gro',
      link: '/case-details1',
      duration: 900,
    },
    {
      image: 'assets/img/image/case6-img3.png',
      title: 'Human Recourses Trusted By Our Customers to Effective Solution',
      link: '/case-details1',
      duration: 1100,
    },
  ];
}
