import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { EventConfig, HeroConfig } from '../../../core/services/tenant.interface';
import { ButtonComponent } from '../button/button.component';

@Component({
  selector: 'app-hero-banner',
  standalone: true,
  imports: [CommonModule, RouterModule, ButtonComponent],
  templateUrl: './hero-banner.component.html',
  styleUrl: './hero-banner.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HeroBannerComponent {
  @Input() heroConfig?: HeroConfig | null;
  @Input() eventConfig?: EventConfig | null;

  get formattedDates(): string {
    if (this.eventConfig?.dates_text) {
      return this.eventConfig.dates_text;
    }

    if (!this.eventConfig?.dates || this.eventConfig.dates.length === 0) {
      return '';
    }

    return this.eventConfig.dates.map(({ date }) => date).join(', ');
  }
}