import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';
import { CommonModule, NgOptimizedImage } from '@angular/common';

@Component({
  selector: 'app-product-carousel',
  standalone: true,
  imports: [CommonModule, NgOptimizedImage],
  templateUrl: './product-carousel.component.html',
  styleUrl: './product-carousel.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ProductCarouselComponent {
  readonly images = input<string[]>([]);
  readonly discount = input<number | null>(null);

  readonly activeIndex = signal(0);

  nextImage(): void {
    const total = this.images().length;
    if (total > 0) {
      this.activeIndex.set((this.activeIndex() + 1) % total);
    }
  }

  prevImage(): void {
    const total = this.images().length;
    if (total > 0) {
      this.activeIndex.set((this.activeIndex() - 1 + total) % total);
    }
  }

  selectImage(index: number): void {
    const total = this.images().length;
    if (index >= 0 && index < total) {
      this.activeIndex.set(index);
    }
  }
}
