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

type BlogItem = {
  image: string;
  tag: string;
  title: string;
  description: string;
  link: string;
  aosDuration: number;
};

@Component({
  selector: 'app-blog',
  host: { 'app-blog': 'app-single-blog7' },
  imports: [RouterLink],
  template: `
    <div class="blog7 sp3" id="blog">
      <div class="container">
        <div class="row">
          <div class="col-lg-6 m-auto text-center">
            <div class="hadding6">
              <h1 class="font-f-7" data-aos="fade-up" data-aos-duration="700">
                Featured Blog Post
              </h1>
              <div class="space16"></div>
              <p data-aos="fade-up" data-aos-duration="900">
                Discover the keys to boosting employee engagement and
                productivity in our latest blog post. We delve into strategies
                and insights that empower
              </p>
            </div>
          </div>
        </div>

        <div class="space30"></div>

        <div class="row">
          @for (item of blogData; track item) {
          <div class="col-lg-4 col-md-6">
            <div
              class="blog6-box"
              [attr.data-aos]="'fade-up'"
              [attr.data-aos-duration]="item.aosDuration"
            >
              <div class="blog6-box-img img100">
                <img [src]="item.image" alt="" />
              </div>
              <div class="hadding6 blog6-hadding">
                <a [routerLink]="[]" class="blog6-tag">{{ item.tag }}</a>
                <div class="space12"></div>
                <h3>
                  <a [routerLink]="item.link" class="font-f-7">{{
                    item.title
                  }}</a>
                </h3>
                <div class="space16"></div>
                <p>{{ item.description }}</p>
                <div class="space16"></div>
                <a [routerLink]="item.link" class="blog6-learn">
                  Read More <span><i class="fa-solid fa-arrow-right"></i></span>
                </a>
              </div>
            </div>
          </div>
          }
        </div>
      </div>
    </div>
  `,
  styles: ``,
})
export class BlogComponent {
  blogData: BlogItem[] = [
    {
      image: 'assets/img/image/blog6-img1.png',
      tag: '#Talent Management',
      title: 'Remote Work Best Practices: Keeping Teams Connected',
      description:
        'Learn how to ensure HR compliance and best mitigate risks in your organization while to be our maintaining a safe and compliant.',
      link: '/blog-details',
      aosDuration: 700,
    },
    {
      image: 'assets/img/image/blog6-img2.png',
      tag: '#Talent Management',
      title: 'Navigating HR Compliance: Tips for a Risk-Free Workplace',
      description:
        'Learn how to ensure HR compliance and best mitigate risks in your organization while to be our maintaining a safe and compliant.',
      link: '/blog-details',
      aosDuration: 1000,
    },
    {
      image: 'assets/img/image/blog6-img3.png',
      tag: '#Talent Management',
      title: 'Diversity and Inclusion in the Workplace: A Path to Success',
      description:
        'Learn how to ensure HR compliance and best mitigate risks in your organization while to be our maintaining a safe and compliant.',
      link: '/blog-details',
      aosDuration: 900,
    },
  ];
}
