import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { Blog, BlogService } from '../root-service/blog.service';

@Component({
  selector: 'app-root-blog',
  templateUrl: './root-blog.component.html',
  styleUrls: ['./root-blog.component.css']
})
export class RootBlogComponent {

  storeData: any;
  blogs : Blog[] = []


  constructor(public store: Store<any>,private blogService : BlogService) {
      this.initStore();
      this.loadBlogs()
  }
  async initStore() {
      this.store
          .select((d) => d.index)
          .subscribe((d) => {
              this.storeData = d;
          });
  }


  loadBlogs() {
    this.blogService.getPostedBlogs().subscribe(data => {
      this.blogs = data;
    });

    console.log(this.blogs)
  }


  blogImages = [

  '/assets/images/blog1.png',
  '/assets/images/blog2.png',
  '/assets/images/blog3.png',
];



getRandomImage(): string {
  const randomIndex = Math.floor(Math.random() * this.blogImages.length);
  return this.blogImages[randomIndex];
}

}
