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

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

@Component({
  selector: 'app-projects',
  host: { 'app-projects': 'app-projects1' },
  imports: [RouterLink],
  template: `
       <div class="projects sp3">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="hadding2">
                        <span class="span" data-aos-duration="700" data-aos="fade-up">Our Projects</span>
                        <div class="space16"></div>
                        <h1 data-aos-duration="900" data-aos="fade-up">Featured Case <span class="after2">Studies</span></h1>
                    </div>
                </div>
                <div class="col-lg-6 text-right">
                    <div class="project-button" data-aos-duration="800" data-aos="fade-up">
                        <a routerLink="/cart" class="button-h-2 btnfos2">View Full Projects</a>
                    </div>
                </div>
            </div>
            <div class="space30"></div>
            <div class="row">
              @for(items of projectData;track $index ){
                <div class="col-lg-6">
                    <div class="project-all-box" [attr.data-aos-duration]="items.duration" data-aos="fade-up">
                        <div class="project-img img100">
                            <img [src]="items.image" alt="">
                        </div>
                        <div class="project-box">
                            <div class="project-hadding hadding2-w">
                                <h4><a routerLink="/case-details1">{{ items.title }}</a></h4>
                                <div class="space14"></div>
                                <p>{{ items.des }}</p>
                                <div class="space24"></div>
                                    <a class="read-more-btn-w" routerLink="/case-details1">Read More <span><i class="fa-solid fa-arrow-right"></i></span></a>
                            </div>
                        </div>
                    </div>
                </div>
              }
            </div>
        </div>
     </div>
  `,
  styles: ``
})
export class ProjectsComponent {
  projectData : projectType[] = [
    {
      image: 'assets/img/image/project-img1.png',
      title: 'Strategy Consulting',
      des: 'Our experienced consultants help develop strategic plans to drive business growth, improve operations, and achieve long-term...',
      duration: 800
    },
    {
      image: 'assets/img/image/project-img2.png',
      title: 'ABC Company',
      des: 'Our experienced consultants help develop strategic plans to drive business growth, improve operations, and achieve long-term...',
      duration: 1000
    }
  ]
}
