// src/app/components/blog/blog.component.ts
import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink } from '@angular/router';
import { BlogService } from '../services/blog.service';

@Component({
  selector: 'app-blog',
  standalone: true,
  imports: [CommonModule, RouterLink],
  template: `
    <section id="blog" class="py-20 bg-gray-100" data-aos="fade-up">
      <div class="container mx-auto px-6">
        <h2 class="text-3xl font-bold text-center">Latest Insights</h2>
        <p class="mt-4 text-center text-gray-600">Stay updated with our latest news and articles.</p>
        <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8">
          <div *ngFor="let post of blogPosts" class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition" data-aos="fade-up">
            <img [src]="post.image" [alt]="post.title" class="rounded-t-lg mb-4 w-full h-auto object-cover">
            <h3 class="text-xl font-semibold mb-2">{{ post.title }}</h3>
            <p class="text-gray-600 mb-4">
              {{ getShortContent(post.content) }}
            </p>
            <a [routerLink]="['/blog', getPostId(post.title)]" class="text-blue-600 hover:underline">Read More</a>
          </div>
        </div>
      </div>
    </section>
  `
})
export class BlogComponent implements OnInit {
  blogPosts: any[] = [];

  constructor(private blogService: BlogService) {}

  ngOnInit() {
    const posts = this.blogService.getAllPosts();
    // Convert the blogPosts object to an array
    this.blogPosts = Object.keys(posts).map(key => posts[key]);
  }

  // Function to get a short preview of the content
  getShortContent(content: string): string {
    const div = document.createElement('div');
    div.innerHTML = content;
    const text = div.textContent || div.innerText || '';
    return text.substring(0, 150) + '...';
  }

  // Function to get post ID based on the title
  getPostId(title: string): string {
    const posts = this.blogService.getAllPosts();
    for (const id in posts) {
      if (posts[id].title === title) {
        return id;
      }
    }
    return '1'; // Default to '1' if not found
  }
}