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

type BlogType = {
  image: string;
  category: string;
  date: string;
  title: string;
  description: string;
  link: string;
  isActive: boolean;
}

@Component({
  selector: 'app-blog',
  host: { 'app-blog': 'app-blog4' },
  imports: [RouterLink,CommonModule],
  template: `
     <div class="blog4 sp3" id="blog">
        <div class="container">
            <div class="row">
                <div class="col-lg-7 m-auto text-center">
                    <div class="hadding4">
                      <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(blog of blogData;track $index){
              <div class="col-lg-4">
                <div class="blog4-box" [ngClass]="{ active: blog.isActive }" [attr.data-aos]="'fade-up'" [attr.data-aos-duration]="blog.isActive ? '1000' : '700'">
                  <div class="blog-box-img img100">
                    <img [src]="blog.image" alt="">
                  </div>
                  <div class="hadding4 blog4-hadding">
                    <ul class="blog4-box-hadding">
                      <li class="blog4-titel1">
                        <a [routerLink]="[]">{{ blog.category }}</a>
                      </li>
                      <li class="blog4-titel2">
                        <a [routerLink]="[]">{{ blog.date }}</a>
                      </li>
                    </ul>
                    <h4><a routerLink="/blog-details">{{ blog.title }}</a></h4>
                    <div class="space16"></div>
                    <p>{{ blog.description }}</p>
                    <div class="space24"></div> 
                      <a class="read-more4" [routerLink]="blog.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="900">
          <div class="col-lg-12 text-center">
              <a routerLink="/blog" class="button4-header4">View All Blogs</a>
          </div>
        </div>
    </div>
  `,
  styles: ``
})
export class BlogComponent {

  blogData:BlogType[] = [
    {
      image: 'assets/img/image/blog4-img1.png',
      category: 'Business',
      date: '15 March, 2023',
      title: 'Technology and Startups: Our finance consultants',
      description:
        'Technology and Startups: Our finance consultants understand the financial challenges faced by technology companies and startups.  in financial modeling,',
      link: '/blog-details',
      isActive: false
    },
    {
      image: 'assets/img/image/blog4-img2.png',
      category: 'Business',
      date: '15 March, 2023',
      title: 'Technology and Startups: Our finance consultants',
      description:
        'Technology and Startups: Our finance consultants understand the financial challenges faced by technology companies and startups.  in financial modeling,',
      link: '/blog-details',
      isActive: true
    },
    {
      image: 'assets/img/image/blog4-img3.png',
      category: 'Business',
      date: '15 March, 2023',
      title: 'Technology and Startups: Our finance consultants',
      description:
        'Technology and Startups: Our finance consultants understand the financial challenges faced by technology companies and startups.  in financial modeling,',
      link: '/blog-details',
      isActive: false
    }
  ]

}
