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

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

@Component({
  selector: 'app-blog',
  host: { 'app-blog': 'app-single-blog5' },
  imports: [RouterLink],
  template: `
    <div class="blog5 sp3" id="blog" style="background-color: #F1F1F5;">
      <div class="container">
        <div class="row">
          <div class="col-lg-6 m-auto text-center">
            <div class="hadding5">
              <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">
                Explore the world of smart investing with our latest blog post.
                This comprehensive guide offers insights and strategies to
                maximize your investment portfolio's performance and returns.
              </p>
            </div>
          </div>
        </div>

        <div class="space30"></div>
        <div class="row">
          @for(item of blogData;track $index){
          <div class="col-lg-4 col-md-6">
            <div
              class="blog5-box"
              data-aos="fade-up"
              [attr.data-aos-duration]="item.duration"
            >
              <div class="blog5-img img100">
                <img [src]="item.image" alt="" />
              </div>
              <div class="blog5-hadding">
                <h4>
                  <a routerLink="/blog-details">{{ item.title }}</a>
                </h4>
                <div class="space16"></div>
                <p>
                  {{ item.des }}
                </p>
                <div class="space16"></div>
                <a routerLink="/blog-details" class="blog5-learn"
                  >Read More <span><i class="fa-solid fa-arrow-right"></i></span
                ></a>
              </div>
            </div>
          </div>
          }
        </div>
        <div class="space40"></div>
        <div class="row">
          <div class="col-lg-12 text-center">
            <div class="" data-aos="fade-up" data-aos-duration="1000">
              <a routerLink="/blog" class="theme-btn5"
                >Read More Blogs<span
                  ><i class="fa-solid fa-angle-right"></i></span
              ></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: ``,
})
export class BlogComponent {
  blogData: blogType[] = [
    {
      image: 'assets/img/image/blog5-img1.png',
      duration: '900',
      title:
        'Strategic Financial Planning for a Secure Future for best Services',
      des: 'Our goal is to empower you with the finance knowledge, strategies, our best finance.',
    },
    {
      image: 'assets/img/image/blog5-img2.png',
      duration: '700',
      title: 'Navigating Tax Optimization: Smart Strategies for Financial',
      des: 'Our goal is to empower you with the finance knowledge, strategies, our best finance.',
    },
    {
      image: 'assets/img/image/blog5-img3.png',
      duration: '1100',
      title: 'Market Trends 2023: What Best Finance Investors Need to  Know',
      des: 'Our goal is to empower you with the finance knowledge, strategies, our best finance.',
    },
  ];
}
