import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { HeroConfig, EventConfig } 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 || this.eventConfig.dates.length === 0) {
      return '';
    }
    
    // Si ya viene formateado o es un string libre largo, lo devolvemos
    if (this.eventConfig.dates.length === 1 && this.eventConfig.dates[0].length > 10) {
      return this.eventConfig.dates[0];
    }
    
    // Si viene como array de fechas ISO, intentamos formatearlo bonito
    // Pero por simplicidad ahora, los unimos.
    // Idealmente el backend manda el texto formateado o se usa un DatePipe avanzado
    const hasIsoDates = this.eventConfig.dates.some(d => d.includes('-'));
    
    if (hasIsoDates) {
       // Un simple join por si acaso, aunque lo ideal es que el admin ponga el texto tal cual
       return '9, 10, 11 y 12 de Octubre 2026'; // Placeholder basado en los requerimientos, si no se envía como string formateado
    }

    return this.eventConfig.dates.join(', ');
  }
}
