import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';

@Component({
  selector: 'app-continuous-image-carousel',
  templateUrl: './continuous-image-carousel.component.html',
  styleUrl: './continuous-image-carousel.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ContinuousImageCarouselComponent {
  readonly images = input.required<readonly string[]>();
  readonly ariaLabel = input('Imágenes destacadas');

  // One full set must cover the viewport before the duplicate set takes over.
  protected readonly trackImages = computed(() => {
    const images = this.images().filter(Boolean);
    if (images.length === 0) return [];

    return Array.from(
      { length: Math.max(images.length, 5) },
      (_, index) => images[index % images.length],
    );
  });
  protected readonly durationSeconds = computed(() => Math.max(this.trackImages().length * 4, 16));
}