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

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

type categoryListType = {
  title: string;
  number: string;
};


@Component({
  selector: 'app-blog-left',
  imports: [RouterLink],
  template: `
   <div class="space28"></div>
<div class="blog-sidebar _relative">
  <div class="blog-shearch">
    <form>
      <div class="search-input">
        <input type="search" placeholder="Search here...." />
      </div>
      <div class="search-button">
        <button><i class="fa-solid fa-magnifying-glass"></i></button>
      </div>
    </form>
  </div>
  <div class="space40"></div>

  <div class="single-widget">
    <h3>Recent Posts</h3>

    <div class="space24"></div>

    @for(item of blogData;track $index){
    <div class="recent-post">
      <div class="">
        <div class="recent-img">
          <img [src]="item.image" alt="" />
        </div>
      </div>
      <div class="recent-post-content">
        <h6>
          <a [routerLink]="[]">{{ item.des }}</a>
        </h6>
        <div class="space6"></div>
        <div class="blog-date-time">
          <ul class="blog-date">
            <li>
               {{ item.date }}
            </li>
          </ul>
        </div>
      </div>
    </div>
    }
  </div>

  <div class="single-widget">
    <h3>Categories</h3>

    <div class="space24"></div>

    <ul class="Categories-list">
      @for(item of categorylist;track $index){
      <li>
        <a [routerLink]="[]">{{ item.title }}</a
        ><a [routerLink]="[]">{{ item.number }}</a>
      </li>
      }
    </ul>
  </div>

  <div class="single-widget widget_tag_cloud">
    <h3>Tags</h3>
    <div class="space24"></div>
    <div class="tagcloud">
      @for(item of tagsData;track $index){
      <a [routerLink]="[]">{{ item }}</a>
      }
    </div>
  </div>
</div>

  `,
  styles: ``
})
export class BlogLeftComponent {
   blogData: blogType[] = [
    {
      image: 'assets/img/image/blog-sidebar-post1.png',
      des: 'Leadership Burnout: What causes it & how avoid it.',
      date: '11/02/2022',
    },
    {
      image: 'assets/img/image/blog-sidebar-post2.png',
      des: 'New Consulting For All Kind Offer Finance...',
      date: '11/02/2022',
    },
    {
      image: 'assets/img/image/blog-sidebar-post3.png',
      des: 'What we are capable to usually discovered...',
      date: '11/02/2022',
    },
    {
      image: 'assets/img/image/blog-sidebar-post4.png',
      des: 'Questions every work business owner able...',
      date: '11/02/2022',
    },
  ];

    categorylist: categoryListType[] = [
    {
      title: 'Business',
      number: '(3)',
    },
    {
      title: 'Corporate',
      number: '(2)',
    },
    {
      title: 'Consultancy',
      number: '(4)',
    },
    {
      title: 'Finance',
      number: '(1)',
    },
    {
      title: 'Consultancy',
      number: '(6)',
    },
    {
      title: 'HR Consultency',
      number: '(5)',
    },
  ];

   tagsData: string[] = [
    'Finance',
    'Business',
    'Consultancy',
    'Process',
    'Campeigns',
    'Corporate',
    'HR Consultency',
    'Consultancy',
  ];

}
