import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { ThemePaginationComponent } from '../../../components/theme-pagination.component';

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

@Component({
  selector: 'app-blog-right',
  imports: [RouterLink, ThemePaginationComponent],
  template: `
    <div class="row">
      @for(item of blogData;track $index){
      <div class="col-lg-6">
        <div class="blog1-single-box active page-blog1-single-box">
          <div class="blog1-box-img img100">
            <img [src]="item.image" alt="" />
          </div>
          <div class="blog1-hadding">
            <ul>
              <li>
                <a [routerLink]="[]" class="span">{{ item.date }}</a>
              </li>
            </ul>
            <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 class="space60"></div>
    <div class="row">
      <app-theme-pagination />
    </div>

    <div class="space30"></div>
  `,
  styles: ``,
})
export class BlogRightComponent {
  blogData: blogType[] = [
    {
      image: 'assets/img/image/blog1-img1.png',
      date: '11 March, 2023',
      des: 'How consultation in business is affecting new ventures',
    },
    {
      image: 'assets/img/image/blog1-img2.png',
      date: '16 March, 2023',
      des: 'Challanges of consultating new Business Firms',
    },
    {
      image: 'assets/img/image/blog1-img3.png',
      date: '03 April, 2023',
      des: 'Revitalising your people in to a retail downturn',
    },
    {
      image: 'assets/img/image/blog1-img4.png',
      date: '15 March, 2023',
      des: 'Customized Solutions: Based on our analysis, we develop',
    },
    {
      image: 'assets/img/image/blog1-img5.png',
      date: '22 April, 2023',
      des: 'Explore our regularly updated blog, where we share expert',
    },
    {
      image: 'assets/img/image/blog1-img6.png',
      date: '19 March, 2023',
      des: `Our commitment doesn't end with implementation.`,
    },
  ];
}
