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

type blogType = {
  image: string;
  date: string;
  des: string;
  isActive: boolean;
};

@Component({
  selector: 'app-blog',
  host: { 'app-blog': 'app-about-blog' },
  imports: [RouterLink, CommonModule],
  template: `
    <div class="blog1 sp3">
      <div class="container">
        <div class="row">
          <div class="col-lg-8 m-auto text-center">
            <div class="page-hadding">
              <h1>Latest News and Blogs</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 blogData;track $index ){
          <div class="col-lg-4">
            <div class="">
              <div
                class="blog1-single-box page-blog1-single-box"
                [ngClass]="{ active: item.isActive }"
              >
                <div class="blog1-box-img img100">
                  <img [src]="item.image" alt="" />
                </div>
                <div class="blog1-hadding">
                  <a [routerLink]="[]" class="span">{{ item.date }}</a>
                  <div class="space14"></div>
                  <h4>
                    <a routerLink="/blog-details">{{ item.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">
          <div class="col-lg-12 text-center">
            <a routerLink="/blog" class="comon-button">View Blogs</a>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: ``,
})
export class BlogComponent {
  blogData:blogType[] = [
    {
      image: 'assets/img/image/blog1-img1.png',
      date: '15 March, 2023',
      des: 'Customized Solutions: Based on our analysis, we develop',
      isActive: false,
    },
    {
      image: 'assets/img/image/blog1-img2.png',
      date: '19 March, 2023',
      des: `Our commitment doesn't end with implementation.`,
      isActive: true,
    },
    {
      image: 'assets/img/image/blog1-img3.png',
      date: '22 April, 2023',
      des: 'Explore our regularly updated blog, where we share expert',
      isActive: false,
    },
  ];
}
