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

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

@Component({
  selector: 'app-blog',
  host: { 'app-blog': 'app-blog1' },
  imports: [RouterLink],
  template: `
   <div class="blog2 sp3" id="blog">
        <div class="container">
            <div class="row">
                <div class="col-lg-7 m-auto text-center">
                    <div class="hadding2">
                        <span class="span" data-aos-duration="800" data-aos="fade-up">Our Blog</span>
                        <div class="space16"></div>
                        <h1 data-aos-duration="900" data-aos="fade-up">Latest News and <span class="after2">Blogs</span></h1>
                        <div class="space24"></div>
                        <p data-aos-duration="1000" data-aos="fade-up">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="blog2-box-all active" [attr.data-aos-duration]="items.duration" data-aos="fade-up">
                        <div class="blog2-box-img img100">
                            <img [src]="items.image" alt="">
                        </div>
                        <div class="hadding2 blog2-hadding">
                            <ul>
                              <li style="display: inline-block;"><a class="date2" [routerLink]="[]">{{items.date}} /&nbsp; 
                              </a></li>
                              <li style="display: inline-block;"><a class="date2" [routerLink]="[]">{{ items.role }}</a></li>
                            </ul>
                            <div class="space16"></div>
                            <h4><a routerLink="/blog-details"> {{items.title}} </a></h4>
                            <div class="space14"></div>
                            <p>{{ items.des }}</p>
                            <div class="space24"></div>
                                <a class="read-more-btn" routerLink="/blog-details">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-duration="800" data-aos="fade-up">
                <div class="col-lg-12 text-center">
                    <a routerLink="/blog" class="button-h-2 btnfos2">View All Blogs</a>
                </div>
            </div>
        </div>
     </div>
  `,
  styles: ``
})
export class BlogComponent {

  blogData: blogType[] = [
    {
      image: 'assets/img/image/blog-img1.png',
      date: '15 March, 2023',
      role: 'Financial',
      duration : 700,
      title: 'Explore our regularly updated blog, where we share expert',
      des: 'We conduct a thorough analysis of your business, industry, and market to identify areas for improvement and growth opportunities.'
    },
    {
      image: 'assets/img/image/blog-img2.png',
      date: '15 March, 2023',
      role: 'Financial',
      duration : 800,
      title: 'Customized Solutions: Based on our analysis, we develop',
      des: 'We conduct a thorough analysis of your business, industry, and market to identify areas for improvement and growth opportunities.'
    },
    {
      image: 'assets/img/image/blog-img1.png',
      date: '15 March, 2023',
      role: 'Financial',
      duration : 1000,
      title: `Our commitment doesn't end with implementation.`,
      des: 'We conduct a thorough analysis of your business, industry, and market to identify areas for improvement and growth opportunities.'
    }
  ]

}
