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

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

  currentIndex: number = 0;

  get formattedDescription(): string {
    return this.formatDescription(this.pin.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.pin.files.length) % this.pin.files.length;
  }

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