import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core';
import { Monument } from '../../model/Monument';

@Component({
  selector: 'app-monument-marker',
  templateUrl: './monument-marker.component.html',
  imports: [CommonModule],
})
export class MonumentMarkerComponent {
  @Input() monument!: Monument;

  currentIndex: number = 0;

  get formattedDescription(): string {
    return this.formatDescription(this.monument.description);
  }

  formatDescription(description: string): string {
    const regex = /@(\w+(-\w+)*(\.\w+(-\w+)*)*)/g;
    return description.replace(
      regex,
      `<a href="/profile/$1" class="text-blue-500 hover:underline">@$1</a>`
    );
  }

  prevSlide(): void {
    this.currentIndex =
      (this.currentIndex - 1 + this.monument.images.length) %
      this.monument.images.length;
  }

  nextSlide(): void {
    this.currentIndex = (this.currentIndex + 1) % this.monument.images.length;
  }
}
