// app.component.ts
import { Component } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent {
  constructor(
    private meta: Meta,
    private title: Title
  ) {
    // Set default OG tags
    this.meta.addTags([
      { property: 'og:type', content: 'website' },
      { property: 'og:image', content: 'https://mosaicimg.com/use?url=yourwebsite.com/your_slug' },
      { property: 'og:image:width', content: '1200' },
      { property: 'og:image:height', content: '630' },
      { name: 'twitter:card', content: 'summary_large_image' }
    ]);
  }
}

// blog-post.component.ts
import { Component, OnInit } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-blog-post',
  template: `
    <article>
      <h1>{{ post.title }}</h1>
    </article>
  `,
})
export class BlogPostComponent implements OnInit {
  post: any;

  constructor(
    private meta: Meta,
    private title: Title,
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    // Get the slug from the route
    const slug = this.route.snapshot.paramMap.get('slug');
    
    // Fetch post data (example)
    this.fetchPost(slug).subscribe(post => {
      this.post = post;
      this.updateMetaTags();
    });
  }

  private updateMetaTags() {
    // Update title
    this.title.setTitle(this.post.title);

    // Update OG tags
    this.meta.updateTag({ property: 'og:title', content: this.post.title });
    this.meta.updateTag({ property: 'og:description', content: this.post.description });
    
    // Dynamic OG image based on slug
    const ogImage = `https://mosaicimg.com/use?url=yourwebsite.com/${this.post.slug}`;
    this.meta.updateTag({ property: 'og:image', content: ogImage });
    this.meta.updateTag({ name: 'twitter:image', content: ogImage });
  }

  private fetchPost(slug: string) {
    // Your post fetching logic here
    return of({ /* post data */ });
  }
}