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

type blogType = {
  duration: number;
  image: string;
  date: string;
  des: string;
}

@Component({
  selector: 'app-blog',
  host: { 'app-blog': 'app-blog2' },
  imports: [RouterLink,CommonModule],
  template: `
      <div class="blog1 sp3" id="blog">
        <div class="container">
          <div class="row">
            <div class="col-lg-8 m-auto text-center">
              <div class="hadding1">
                <h1 data-aos="fade-up" data-aos-duration="700">Latest News and Blogs</h1>
                <div class="space24"></div>
                <p data-aos="fade-up" data-aos-duration="900">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 (items of blogData; track $index ){
             <div class="col-lg-4">
              <div class="" data-aos="fade-up" [attr.data-aos-duration]="items.duration">
                <div class="blog1-single-box" [ngClass]="{ 'active': $index === 1 }">
                  <div class="blog1-box-img border5 img100">
                    <img [src]="items.image" alt="">
                  </div>
                  <div class="blog1-hadding">
                    <ul>
                      <li><a [routerLink]="[]" class="span">{{items.date}}</a></li>
                    </ul>
                    <div class="space14"></div>
                    <h4><a routerLink="/blog-details">{{items.des}}</a></h4>
                    <div class="space30"></div>
                      <a class="learn-more1" routerLink="/blog-details">Read More<span><i class="fa-solid fa-arrow-right"></i></span></a>
                  </div>
                </div>
              </div>
            </div>
          }
          </div>
          <div class="space40"></div>
          <div class="row" data-aos="fade-up" data-aos-duration="700">
            <div class="col-lg-12 text-center">
              <a routerLink="/blog" class="btn_theme btn_theme btn_theme_active wow fadeInDown1" data-wow-duration="0.8s">View Blogs<span></span></a>
            </div>
          </div>
        </div>
      </div>
  `,
  styles: ``
})
export class BlogComponent {

  blogData: blogType[] = [
    {
      duration: 700,
      image: 'assets/img/image/blog1-img1.png',
      date: '15 March, 2023',
      des: 'Customized Solutions: Based on our analysis, we develop'
    },
    {
      duration: 900,
      image: 'assets/img/image/blog1-img2.png',
      date: '19 March, 2023',
      des: `Our commitment doesn't end with implementation.`
    },
    {
      duration: 1100,
      image: 'assets/img/image/blog1-img3.png',
      date: '22 April, 2023',
      des: 'Explore our regularly updated blog, where we share expert'
    }
  ]
  
}
