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

type BlogType = {
  image: string;
  date: string;
  category: string;
  title: string;
  link: string;
  duration: number;
  active?: boolean;
};

@Component({
  selector: 'app-blog',
  host: { 'app-blog': 'app-blog3' },
  imports: [CommonModule, RouterLink],
  template: `
    <div class="blog3 sp3" id="blog">
        <div class="container">
            <div class="row">
                <div class="col-lg-7 m-auto text-center">
                    <div class="hadding3">
                        <h1 data-aos="fade-up" data-aos-duration="700">Latest News and Blogs</h1>
                        <div class="space16"></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(item of blogData; track $index) {
                    <div class="col-lg-4">
                      <div
                        class="blog3-box-all"
                        [ngClass]="{ 'active': item.active }"
                        data-aos="fade-up"
                        [attr.data-aos-duration]="item.duration"
                      >
                        <div class="blog3-box-img img100">
                          <img [src]="item.image" alt="">
                        </div>
                        <div class="hadding3 blog3-hadding">
                          <ul>
                            <li style="display: inline-block;">
                              <a [routerLink]="[]" class="date2">{{ item.date }} /&nbsp;</a>
                            </li>
                            <li style="display: inline-block;">
                              <a [routerLink]="[]" class="date2">{{ item.category }}</a>
                            </li>
                          </ul>
                          <div class="space16"></div>
                          <h4>
                            <a [routerLink]="item.link">{{ item.title }}</a>
                          </h4>
                          <div class="space24"></div>
                          <a class="read-more3-3" [routerLink]="item.link">
                            Read More <span><i class="fa-solid fa-arrow-right"></i></span>
                          </a>
                        </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 m-auto">
                    <a class="buttonBox2 fifth" routerLink="/blog">View All Blogs</a>
                </div>
            </div>
        </div>
      </div>
  `,
  styles: ``
})
export class BlogComponent {

  blogData: BlogType[] = [
    {
      image: 'assets/img/image/blog3-img1.png',
      date: '15 March, 2023',
      category: 'Uncategorized',
      title: 'Explore our regularly updated blog, where we share expert tips, industry trends.',
      link: '/blog-details',
      duration: 700
    },
    {
      image: 'assets/img/image/blog3-img2.png',
      date: '15 March, 2023',
      category: 'Uncategorized',
      title: 'Explore our regularly updated blog, where we share expert tips, industry trends.',
      link: '/blog-details',
      duration: 900,
      active: true 
    },
    {
      image: 'assets/img/image/blog3-img3.png',
      date: '15 March, 2023',
      category: 'Uncategorized',
      title: 'Explore our regularly updated blog, where we share expert tips, industry trends.',
      link: '/blog-details',
      duration: 700
    }
  ];

}
