import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MarkdownService } from '../../core/services/markdown.service';
import { PublicBlogPost } from '../../core/services/blog.service';

@Component({
  selector: 'app-blog-presenter',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [CommonModule],
  styles: [`
    .blog-item { display: block; margin: 0 0 16px 0; }
    .blog-title { margin: 0 0 4px 0; font-size: 18px; }
    .blog-date { display: block; font-size: 12px; opacity: 0.7; margin-bottom: 8px; }
    .blog-body { font-size: 14px; }
  `],
  template: `
    <article class="blog-item" [attr.data-testid]="'blog-presenter-' + post().id">
      <h2 class="blog-title" [attr.data-testid]="'blog-presenter-title-' + post().id">
        {{ post().title }}
      </h2>
      <time class="blog-date" [attr.data-testid]="'blog-presenter-date-' + post().id">
        {{ post().publishedAt | date: 'medium' }}
      </time>
      <div
        class="blog-body"
        [attr.data-testid]="'blog-presenter-body-' + post().id"
        [innerHTML]="renderedHtml()"
      ></div>
    </article>
  `,
})
export class BlogPresenterComponent {
  readonly post = input.required<PublicBlogPost>();
  private readonly markdown = new MarkdownService();

  renderedHtml(): string {
    return this.markdown.render(this.post()?.bodyMd ?? '');
  }
}